/*
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.3.94
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: skinloor
*/


  * { box-sizing: border-box; }
  #sl-stage h1:not(.hkick):not(.elementor-heading-title), #sl-stage h2:not(.elementor-heading-title), #sl-stage .hclaim { text-transform:uppercase; letter-spacing:.05em !important; }
  #sl-stage h1:not(.elementor-heading-title) span[style*="italic"], #sl-stage h2:not(.elementor-heading-title) span[style*="italic"], #sl-stage .hclaim 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); } }
  /* KB a 2.5s: con 9s el Speed Index de PSI se iba a 10s (viewport "cambiando") */
  .hslide.on { animation: sl-kb 2.5s 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; font-family:'Encode Sans',sans-serif; color:#1a1712; 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:not(.hkick){font-size:60px !important;} #sl-hero .hclaim{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 !important;}
    #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:not(.hkick){font-size:38px !important;} #sl-hero .hclaim{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 > 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;}
    /* velo blanco concentrado en la esquina inferior izquierda (donde va el texto):
       la esquina inferior derecha queda libre y la foto se ve */
    #sl-hero > div:nth-child(3) > div:nth-child(2){background:radial-gradient(135% 120% at 0% 100%, #ffffff 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.3) 66%, rgba(255,255,255,0) 84%) !important;}
    .htext{top:auto !important; bottom:104px; transform:none !important; gap:18px;}
    #sl-heroslides img{object-position:60% 12% !important;}
    /* slide rebajas: su h2 "−15% en todo" iba a 82px (246px de alto) y se metia bajo la cabecera */
    #sl-hero .htext h2{font-size:44px !important;}
    #novedad > div:last-child{min-height:520px;}
    #sl-news form button{width:100%;}
    /* ojo: los elementos con .sl-reveal reescriben su style inline desde JS
       y el navegador lo re-serializa CON espacio -> cubrir ambas grafias */
    #sl-metodo [style*="gap: 56px"], #sl-metodo [style*="gap:56px"]{gap:28px !important;}
  }

/* Watermark del footer: esta en el borde inferior exacto del documento y su
   estado pre-reveal (translateY 40px) lo hunde aun mas; el IO de wow.js
   (rootMargin -6% abajo) nunca lo alcanza -> quedaba opacity:0 PARA SIEMPRE
   (movil y desktop). Se exime del reveal: visible siempre. */
footer svg[viewBox="0 0 1440 226"]{ opacity:1 !important; transform:none !important; }

/* ===== Flechas del slider del hero (solo escritorio) =====
   Estilo editorial de la casa: flecha larga de trazo fino, sin circulo;
   al hover se dora y se desplaza un pelin en su direccion. */
#sl-heronav{ position:absolute; right:72px; bottom:44px; display:flex; gap:30px; z-index:4; }
#sl-heronav button{ background:none; border:none; padding:14px 2px; color:rgba(26,23,18,.55); cursor:pointer; display:inline-flex; align-items:center; transition:color .35s ease, transform .45s cubic-bezier(.16,1,.3,1); }
#sl-heronav button:hover{ color:#a5824a; }
#sl-heronav [data-hnext]:hover{ transform:translateX(5px); }
#sl-heronav [data-hprev]:hover{ transform:translateX(-5px); }
@media (max-width:720px){ #sl-heronav{ display:none; } }

/* ===== Desplegables del menú (escritorio) ===== */
.sl-navtop{ white-space:nowrap; }
/* 5 pestañas reales caben sin rozar el logo: gap y cuerpo un punto menores */
#sl-hero > div:nth-child(2) > div:first-child, #sl-mini > div > div:first-child{ gap:24px !important; font-size:12px !important; }
.sl-navitem{ position:relative; display:inline-flex; }
.sl-drop{ position:absolute; top:100%; left:-22px; margin-top:16px; padding:20px 26px; background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(26,23,18,.08); box-shadow:0 26px 50px -20px rgba(26,23,18,.22); display:flex; flex-direction:column; gap:13px; min-width:215px; white-space:nowrap; z-index:40; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s; }
.sl-drop::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; } /* puente hover */
.sl-navitem:hover .sl-drop{ opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.sl-drop a{ font-size:12px; letter-spacing:.14em; }

/* ===== Menú móvil hamburguesa (overlay a pantalla completa) ===== */
.sl-burger{ display:none; }
#sl-menu{ position:fixed; inset:0; z-index:12000; background:#101010; color:#f5f1e8; display:flex; flex-direction:column; padding:18px 24px 30px; opacity:0; visibility:hidden; transition:opacity .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .5s; }
#sl-menu.open{ opacity:1; visibility:visible; transition:opacity .5s cubic-bezier(.16,1,.3,1); }
body.slm-lock{ overflow:hidden; }
.slm-top{ display:flex; align-items:center; justify-content:space-between; padding:4px 0 24px; border-bottom:1px solid rgba(245,241,232,.12); }
.slm-top img{ height:34px; filter:brightness(0) invert(1); }
.slm-close{ background:none; border:none; color:#f5f1e8; font-size:20px; line-height:1; padding:10px; margin-right:-10px; cursor:pointer; }
.slm-nav{ display:flex; flex-direction:column; justify-content:center; flex:1; }
.slm-nav a{ display:flex; align-items:baseline; gap:18px; padding:22px 2px; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:34px; letter-spacing:.06em; text-transform:uppercase; color:#f5f1e8; border-bottom:1px solid rgba(245,241,232,.08); opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
#sl-menu.open .slm-nav a{ opacity:1; transform:none; }
#sl-menu.open .slm-nav a:nth-child(1){ transition-delay:.10s; }
#sl-menu.open .slm-nav a:nth-child(2){ transition-delay:.18s; }
#sl-menu.open .slm-nav a:nth-child(3){ transition-delay:.26s; }
#sl-menu.open .slm-nav a:nth-child(4){ transition-delay:.34s; }
#sl-menu.open .slm-nav a:nth-child(5){ transition-delay:.42s; }
.slm-num{ font-family:'Poppins',sans-serif; font-size:12px; letter-spacing:.22em; color:#c8a25b; }
.slm-foot{ display:flex; gap:22px; align-items:center; padding-top:22px; border-top:1px solid rgba(245,241,232,.12); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,241,232,.75); white-space:nowrap; }
.slm-ig{ margin-left:auto; color:#c8a25b; }

/* ===== Correcciones móvil (Fase pulido) ===== */
@media (max-width:720px){
  /* Filosofía: el grid 3-col no colapsaba (CSS asumía flex) -> apilar */
  #sl-philo > div[style*="grid-template-columns:1fr auto 1fr"]{ display:flex !important; flex-direction:column; gap:36px !important; }
  #sl-philo > div[style*="grid-template-columns:1fr auto 1fr"] > div{ transform:none !important; width:100%; gap:28px !important; }
  #sl-philo > div[style*="grid-template-columns:1fr auto 1fr"] > div:nth-child(2){ order:-1; }
  #sl-philo div[style*="text-align:right"][style*="row-reverse"]{ text-align:left !important; flex-direction:row !important; }
  #sl-philo div[style*="width:230px"]{ width:auto !important; }
  #sl-philo img[alt*="Gama"]{ max-width:320px !important; }

  /* --- Novedad SPF: la columna de fotos conservaba min-height:900px inline
         (la regla sin !important perdia) y el aro decorativo de 500px flotaba
         a media seccion dejando un hueco enorme. --- */
  #novedad{ min-height:0 !important; }
  #novedad > div:last-child{ min-height:0 !important; height:440px !important; }
  #novedad > div:last-child > div{ height:400px !important; width:92% !important; }
  /* aro + halo dorados: anclados detras de las fotos, no a media seccion */
  #novedad > div:first-child{ top:auto !important; bottom:0 !important; height:440px !important; width:100% !important; }
  #novedad > div:first-child > div:first-child{ width:420px !important; height:420px !important; }
  #novedad > div:first-child > div:last-child{ width:280px !important; height:280px !important; }
  /* fila CTA: el precio partia en dos lineas junto al boton */
  #novedad > div:nth-child(2){ gap:20px !important; }
  #novedad > div:nth-child(2) > div:last-child{ flex-wrap:wrap; gap:14px !important; }
  #novedad > div:nth-child(2) > div:last-child > span{ white-space:nowrap; }
  #novedad > div:nth-child(2) > div:last-child span[style*="font-size:30px"]{ font-size:26px !important; }
  #novedad > div:nth-child(2) > div:last-child a{ padding:14px 28px !important; font-size:14px !important; }
  #novedad p{ font-size:17px !important; }

  /* servicios: cada item en su fila, separados por linea */
  #sl-serv > div{ flex-direction:column; align-items:stretch !important; gap:0 !important; }
  #sl-serv > div > div{ padding:13px 0; border-bottom:1px solid rgba(26,23,18,.1); }
  #sl-serv > div > div:last-child{ border-bottom:none; }
  /* numeros decorativos 01/02 de seccion: fuera en movil */
  #sl-best span[style*="text-stroke"], #sl-more span[style*="text-stroke"]{ display:none !important; }
  /* carruseles de producto: 2 tarjetas y pico por pantalla */
  #sl-best [data-pc-card], #sl-more [data-pc-card]{ flex:0 0 44% !important; }
  /* polaroids novedad: mas faldon blanco inferior */
  #novedad [data-poly="big"]{ padding-bottom:72px !important; }
  #novedad [data-poly="small"]{ padding-bottom:56px !important; }
  /* aire bajo la composicion de polaroids */
  #novedad{ padding-bottom:40px !important; }

  /* menu hamburguesa: el boton aparece y la fila de categorias desaparece
     (la sustituye el overlay #sl-menu) */
  .sl-burger{ display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:32px; height:32px; background:none; border:none; padding:0; cursor:pointer; }
  .sl-burger span{ display:block; width:22px; height:1.5px; background:#1a1712; }
  #sl-hero > div:nth-child(2) > div:first-child{ display:none !important; }
  #sl-mini > div > div:first-child{ display:none !important; }
  /* una sola fila: logo + iconos+burger (logo a 34px y gap 16 para que quepan) */
  #sl-hero > div:nth-child(2) img{ height:34px !important; }
  #sl-hero > div:nth-child(2) > div:last-child{ gap:16px !important; }
  #sl-mini > div > div:last-child{ gap:16px !important; }

  /* --- Barra flotante: 621px de contenido en 375px -> logo y iconos
         (carrito incluido) quedaban fuera de pantalla. Dos filas, como
         la cabecera del hero: logo+iconos arriba, categorias debajo. --- */
  #sl-mini > div{ flex-wrap:wrap !important; padding:10px 20px !important; row-gap:9px !important; }
  #sl-mini > div > div:first-child{ order:3; flex:1 0 100% !important; justify-content:center; gap:20px !important; font-size:11px !important; letter-spacing:.12em !important; }
  #sl-mini > div > a{ flex:1 1 auto !important; }
  #sl-mini img{ height:30px !important; }
  #sl-mini > div > div:last-child{ flex:none !important; gap:20px !important; }

  /* --- Ofertas: la fila (foto 136 + texto + precio) sumaba 392px en 327
         disponibles -> los precios se cortaban ("33", "200,0("). --- */
  #ofTrack a{ gap:14px !important; }
  #ofTrack a > div:first-child{ width:96px !important; height:96px !important; }
  #ofTrack a > div:nth-child(2){ min-width:0 !important; overflow-wrap:anywhere; }
  #ofTrack a > div:nth-child(2) span[style*="font-size:21px"]{ font-size:18px !important; }
  #ofTrack a > div:last-child{ min-width:0 !important; }
  #ofTrack a > div:last-child span[style*="font-size:21px"]{ font-size:18px !important; white-space:nowrap; }
  /* el "−15%" de 140px se comia el rotulo "Rebajas Skinloor" */
  #sl-ofertas span[style*="font-size:140px"]{ font-size:64px !important; top:20px !important; right:16px !important; }
  #sl-ofertas span[style*="letter-spacing:.4em"]{ top:34px !important; left:24px !important; font-size:11px !important; letter-spacing:.3em !important; }
  #sl-ofertas > div:first-child > div:nth-child(4){ left:24px !important; bottom:36px !important; }
}

/* ==== TIENDA (categoria + ficha) ==== */
/* Diseno de Claude Design portado a clases: nada de selectores [style*=...],
   que en este tema se rompen segun como serialice el navegador el atributo. */

/* ---- cabecera compartida sin hero ---- */
#sl-hero.sl-hero--bar{ height:auto !important; min-height:0 !important; display:block; }

/* position:sticky no funciona si un ancestro tiene overflow-x:hidden: ese
   elemento pasa a ser el contenedor de scroll de referencia. 'clip' recorta
   igual pero no crea contenedor, asi que los sticky del tema (filtros, índice
   del KB, columnas de texto SEO) vuelven a pegarse de verdad. */
#sl-outer{ overflow-x:clip !important; }

/* columna izquierda fija en los bloques de texto SEO, que son muy largos */
#cat-seo .cat-seo-side, #pd-seo .pd-seo-side{ position:sticky; top:120px; align-self:start; }

/* ---- piezas comunes ---- */
.sl-gold{ color:#a5824a; }
.sl-eyebrow{ font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:#a5824a; }
.sl-eyebrow--gold{ color:#c8a25b; }
.sl-hair{ display:block; width:44px; height:1px; background:#c8a25b; }
.sl-label-sm{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#8a8578; }
.sl-underline{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid #c8a25b; padding-bottom:4px; white-space:nowrap; }
.sl-ico{ flex:none; color:#a5824a; display:inline-flex; }
.sl-crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#8a8578; }
.sl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; border-radius:100px; font-family:'Encode Sans',sans-serif; font-size:14px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; padding:15px 34px; transition:background .35s ease, color .35s ease; text-align:center; }
.sl-btn--dark{ background:#1a1712; color:#ffffff; }
.sl-btn--dark:hover{ background:#c8a25b; color:#1a1712; opacity:1; }
.sl-badge{ position:absolute; top:16px; left:16px; z-index:2; background:#1a1712; color:#ffffff; font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:5px 11px; }
.sl-badge--gold{ background:#c8a25b; color:#1a1712; }
.sl-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.sl-notice{ margin:0 0 16px; padding:13px 18px; border:1px solid rgba(26,23,18,.16); font-size:15px; line-height:1.6; color:#4a473f; }
.sl-notice--ok{ border-color:rgba(125,154,110,.55); color:#3f5a35; background:rgba(125,154,110,.07); }

/* texto solo para lectores de pantalla: lo define la hoja de WooCommerce, que
   en estas paginas ya no se carga -> sin esto el precio se leeria dos veces */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* avisos de WooCommerce (anadido al carrito, errores) */
.woocommerce-notices-wrapper:empty{ display:none; }
.woocommerce-message, .woocommerce-error, .woocommerce-info{ list-style:none; margin:0 0 18px; padding:14px 20px; border-left:2px solid #c8a25b; background:#f7f5f1; font-size:15px; line-height:1.6; color:#4a473f; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.woocommerce-error{ border-left-color:#b36b5e; }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button{ margin-left:auto; font-size:12px; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid #c8a25b; white-space:nowrap; }

/* ============================================================
   1 · CATEGORIA
   ============================================================ */

#cat-hero{ display:grid; grid-template-columns:1fr 1fr; background:#ffffff; border-bottom:1px solid rgba(26,23,18,.1); min-height:440px; }
.cat-hero-txt{ padding:52px 64px 52px 72px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
#cat-hero h1{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:62px; line-height:1.02; color:#1a1712; }
.cat-hero-intro{ margin:0; max-width:470px; font-size:19px; line-height:1.7; color:#4a473f; text-wrap:pretty; }
.cat-hero-serv{ display:flex; flex-wrap:wrap; gap:16px 28px; margin-top:14px; }
.cat-hero-serv > span{ display:inline-flex; align-items:center; gap:9px; font-size:15px; color:#4a473f; white-space:nowrap; }
.cat-hero-img{ position:relative; min-height:440px; overflow:hidden; background:#eae6df; }
.cat-hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

#cat-subs-wrap{ background:#ffffff; padding:56px 72px 8px; display:flex; flex-direction:column; gap:26px; }
.cat-subs-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
/* auto-fit, no repeat(6): con 4 mosaicos la rejilla fija dejaba dos columnas
   vacías y el bloque quedaba pegado a la izquierda (437px de hueco). Ahora
   reparten el ancho; el max-width evita que 2 ó 3 crezcan desmedidos. */
#cat-subs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; justify-content:center; }
/* el tope solo en escritorio: es donde auto-fit podría estirar 2 ó 3 mosaicos
   hasta media pantalla. En tableta y móvil manda el número de columnas. */
@media (min-width:1201px){ #cat-subs .subcat{ width:100%; max-width:360px; justify-self:center; } }
.subcat{ display:flex; flex-direction:column; gap:12px; }
.subcat-img{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#f2efe9; }
.subcat-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.subcat:hover .subcat-img img{ transform:scale(1.07); }
.subcat-name{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; }

#cat-body{ display:grid; grid-template-columns:264px 1fr; gap:56px; background:#ffffff; padding:56px 72px 104px; align-items:start; }

/* barra lateral de filtros (exenta del revelado: es sticky) */
.sl-side{ display:flex; flex-direction:column; gap:30px; position:sticky; top:120px; align-self:start; opacity:1 !important; transform:none !important; }
.sl-side-head{ display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid rgba(26,23,18,.13); padding-bottom:14px; }
.sl-clear{ font-size:12px; color:#8a8578; }
.sl-fgroup{ display:flex; flex-direction:column; gap:14px; }
.sl-flabel{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#a5824a; }
.sl-side .fx{ display:flex; align-items:center; gap:11px; font-size:16px; line-height:1.35; color:#4a473f; cursor:pointer; transition:color .3s ease; }
.sl-side .fx:hover{ color:#a5824a; }
.sl-side input[type="checkbox"]{ accent-color:#1a1712; width:15px; height:15px; margin:0; flex:none; cursor:pointer; }
.sl-fcount{ margin-left:auto; font-size:13px; color:#a09b8f; }
.sl-side input[type="range"]{ width:100%; accent-color:#1a1712; }
.sl-frange{ display:flex; justify-content:space-between; font-size:14px; color:#6b6659; }
.sl-fapply{ align-self:stretch; padding:13px 26px; font-size:13px; letter-spacing:.18em; }
.sl-fhelp{ border-top:1px solid rgba(26,23,18,.13); padding-top:24px; display:flex; flex-direction:column; gap:12px; }
.sl-fhelp > span{ font-size:16px; }
.sl-fhelp p{ margin:0; font-size:15px; line-height:1.6; color:#6b6659; }
.sl-fhelp .sl-btn{ align-self:flex-start; margin-top:4px; padding:13px 26px; font-size:13px; letter-spacing:.18em; }
.sl-filtoggle{ display:none; align-items:center; gap:9px; background:none; border:1px solid rgba(26,23,18,.22); border-radius:100px; padding:11px 20px; font-family:'Encode Sans',sans-serif; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#1a1712; cursor:pointer; }

.cat-results{ display:flex; flex-direction:column; gap:34px; min-width:0; }
.cat-results-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid rgba(26,23,18,.13); padding-bottom:18px; flex-wrap:wrap; }
.cat-count{ font-size:15px; color:#6b6659; }
.cat-count span{ color:#1a1712; }
.cat-order{ display:flex; align-items:center; gap:12px; }
.cat-order select{ -webkit-appearance:none; appearance:none; border:1px solid rgba(26,23,18,.22); border-radius:100px; padding:11px 34px 11px 18px; background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231a1712' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center; font-family:'Encode Sans',sans-serif; font-size:15px; color:#1a1712; cursor:pointer; }

/* filas de igual alto: asi el boton "Anadir" queda alineado aunque un nombre
   ocupe tres lineas (con alturas automaticas se desbordaba por abajo) */
#cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:44px 26px; grid-auto-rows:1fr; }
.sl-pitem{ display:flex; flex-direction:column; gap:16px; height:100%; }
.sl-pcard{ display:block; position:relative; aspect-ratio:1/1; background:#f2efe9; overflow:hidden; }
.sl-pcard img{ width:100%; height:100%; object-fit:cover; display:block; }
.sl-pcat{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#8a8578; }
.sl-prow{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sl-pname{ font-size:19px; line-height:1.3; color:#1a1712; transition:color .3s ease; }
.sl-pitem:hover .sl-pname{ color:#a5824a; }
.sl-pprice{ font-size:17px; color:#a5824a; white-space:nowrap; text-align:right; }
.sl-pprice del{ display:block; font-size:13px; color:#9a958a; }
.sl-pprice ins{ text-decoration:none; background:none; color:#a5824a; }
.sl-padd{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:auto; background:#1a1712; color:#ffffff; padding:14px 16px; border-radius:100px; font-size:16px; letter-spacing:.16em; text-transform:uppercase; transition:background .35s ease, color .35s ease; }
.sl-pitem:hover .sl-padd{ background:#c8a25b; color:#1a1712; }
.sl-pitem .added_to_cart{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#a5824a; border-bottom:1px solid rgba(165,130,74,.5); align-self:flex-start; }

.cat-end{ display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:18px; }
.cat-bar{ position:relative; display:block; width:220px; height:2px; background:rgba(26,23,18,.12); }
.cat-bar span{ position:absolute; left:0; top:0; height:2px; background:#c8a25b; display:block; }
.cat-endtxt{ font-size:14px; color:#8a8578; }
.cat-empty{ font-size:17px; color:#6b6659; }
.cat-empty a{ color:#a5824a; border-bottom:1px solid rgba(165,130,74,.5); }
.woocommerce-pagination ul{ list-style:none; display:flex; gap:8px; padding:0; margin:6px 0 0; }
.woocommerce-pagination a, .woocommerce-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid rgba(26,23,18,.16); border-radius:100px; font-size:14px; color:#4a473f; }
.woocommerce-pagination .current{ background:#1a1712; border-color:#1a1712; color:#ffffff; }

#cat-seo{ display:grid; grid-template-columns:1fr 1.35fr; gap:72px; background:#ffffff; border-top:1px solid rgba(26,23,18,.08); padding:96px 72px; }
.cat-seo-side{ display:flex; flex-direction:column; gap:20px; }
#cat-seo h2{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:52px; line-height:1.04; }
.cat-seo-body{ display:flex; flex-direction:column; gap:34px; }
.cat-seo-intro{ margin:0; font-size:19px; line-height:1.8; color:#4a473f; text-wrap:pretty; }
.cat-seo-block{ display:flex; flex-direction:column; gap:10px; }
.cat-seo-block h3{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:400; font-size:22px; letter-spacing:.02em; }
.cat-seo-block p{ margin:0; font-size:18px; line-height:1.75; color:#4a473f; text-wrap:pretty; }
#cat-seo a{ color:#a5824a; border-bottom:1px solid rgba(165,130,74,.4); }
/* hub: el texto SEO es el contenido de la pagina (h2/h3/p sueltos). Los h2 se
   pintan como subtitulos para no competir con el h2 de la izquierda; siguen
   siendo h2 en el HTML. El !important es contra #sl-stage h2 (mayusculas). */
/* el selector lleva el #cat-seo delante: si no, "#cat-seo h2 {52px}" gana */
#cat-seo.cat-seo--hub .cat-seo-body{ gap:16px; }
#cat-seo.cat-seo--hub .cat-seo-body h2,
#cat-seo.cat-seo--hub .cat-seo-body h3{ margin:22px 0 0; font-family:'Encode Sans',sans-serif; font-weight:400; line-height:1.35; color:#1a1712; text-transform:none !important; letter-spacing:.02em !important; }
#cat-seo.cat-seo--hub .cat-seo-body h2{ font-size:23px; }
#cat-seo.cat-seo--hub .cat-seo-body h3{ font-size:19px; }
#cat-seo.cat-seo--hub .cat-seo-body > *:first-child{ margin-top:0; }
#cat-seo.cat-seo--hub .cat-seo-body p{ margin:0; font-size:18px; line-height:1.75; color:#4a473f; text-wrap:pretty; }

#cat-faq{ background:#f7f5f1; border-top:1px solid rgba(26,23,18,.08); padding:96px 72px; display:flex; flex-direction:column; align-items:center; gap:44px; }
.cat-faq-head{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
#cat-faq h2{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:52px; line-height:1.04; }
.cat-faq-list{ width:100%; max-width:900px; display:flex; flex-direction:column; }
.cat-faq-list details{ border-top:1px solid rgba(26,23,18,.14); }
.cat-faq-list details:last-child{ border-bottom:1px solid rgba(26,23,18,.14); }
.cat-faq-list summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; font-size:21px; list-style:none; cursor:pointer; }
.cat-faq-list summary::-webkit-details-marker{ display:none; }
.cat-faq-list .chev{ flex:none; font-size:24px; color:#a5824a; line-height:1; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.cat-faq-list details[open] .chev{ transform:rotate(45deg); }
.cat-faq-list p{ margin:0 0 26px; max-width:760px; font-size:18px; line-height:1.75; color:#4a473f; }

/* newsletter compartida */
.sl-news--shop{ position:relative; background:radial-gradient(58% 95% at 50% -10%, rgba(200,162,91,.16) 0%, rgba(200,162,91,0) 62%), #101010; padding:104px 72px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; }
.sl-news--shop h2{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:58px; line-height:1.04; color:#f5f1e8; }
.sl-news--shop > p{ margin:0; max-width:500px; font-size:18px; line-height:1.7; color:rgba(245,241,232,.7); }
.sl-news--shop .sl-notice{ color:rgba(245,241,232,.85); border-color:rgba(245,241,232,.3); }
.sl-newsform{ display:flex; gap:10px; width:100%; max-width:520px; margin-top:10px; }
.sl-newsform input[type="email"]{ flex:1; min-width:0; padding:17px 22px; border-radius:100px; border:1px solid rgba(245,241,232,.25); background:rgba(245,241,232,.06); color:#f5f1e8; font-family:'Encode Sans',sans-serif; font-size:16px; outline:none; }
.sl-newsform input[type="email"]:focus{ border-color:#c8a25b; }
.sl-newsform button{ flex:none; padding:17px 34px; border-radius:100px; border:none; background:#c8a25b; color:#1a1712; font-family:'Encode Sans',sans-serif; font-size:16px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background .35s ease; }
.sl-newsform button:hover{ background:#f5f1e8; }

/* ============================================================
   2 · FICHA DE PRODUCTO
   ============================================================ */

#pd-main{ display:grid; grid-template-columns:1.15fr 1fr; gap:64px; padding:48px 72px 88px; align-items:center; background:#ffffff; }
.pd-media{ min-width:0; }
#pd-media-d{ display:flex; align-items:flex-start; gap:12px; }
.pd-thumbs{ flex:none; width:64px; display:flex; flex-direction:column; gap:8px; }
.pd-thumbs .thumb{ display:block; width:100%; aspect-ratio:1/1; padding:0; overflow:hidden; background:#f2efe9; border:1px solid rgba(26,23,18,.14); opacity:.75; cursor:pointer; transition:border-color .3s ease, opacity .3s ease; }
.pd-thumbs .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumbs .thumb.is-active{ border-color:#1a1712; opacity:1; }
.pd-thumbs .thumb:hover{ border-color:#c8a25b; opacity:1; }
.pd-mainimg{ position:relative; flex:1; min-width:0; aspect-ratio:1/1; background:#f2efe9; overflow:hidden; cursor:zoom-in; }
.pd-mainimg img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .38s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
/* Pase automatico de la ficha: la foto nueva entra en una capa encima de la actual (fundido cruzado).
   Selector con .zoom porque .zoom img (mas abajo) solo transiciona transform y ganaba por orden. */
.zoom.pd-mainimg img.pd-cross{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transition:opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.4s cubic-bezier(.16,1,.3,1); }
.zoom.pd-mainimg img.pd-cross.on{ opacity:1; }
.pd-mainimg:hover img{ transform:scale(1.04); }

#pd-buy{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.pd-head{ display:flex; flex-direction:column; gap:14px; }
#pd-buy h1{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:52px; line-height:1.04; }
.pd-sub{ font-size:17px; letter-spacing:.03em; color:#4a473f; }
.pd-price{ display:flex; align-items:baseline; gap:14px; padding-top:22px; border-top:1px solid rgba(26,23,18,.12); font-size:34px; color:#1a1712; }
.pd-price del{ font-size:17px; color:#9a958a; }
.pd-price ins{ text-decoration:none; background:none; color:#1a1712; }
.pd-short p{ margin:0; font-size:18px; line-height:1.7; color:#4a473f; text-wrap:pretty; }
.pd-cart{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.pd-qty{ flex:none; display:flex; align-items:center; gap:12px; padding:10px 16px; border:1px solid rgba(26,23,18,.24); border-radius:100px; }
.pd-qty button{ border:none; background:none; font-size:18px; color:#1a1712; cursor:pointer; padding:0 2px; line-height:1; }
.pd-qty input{ width:34px; border:none; background:none; font-family:'Encode Sans',sans-serif; font-size:15px; text-align:center; color:#1a1712; -moz-appearance:textfield; }
.pd-qty input::-webkit-outer-spin-button, .pd-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd-cart .cta{ flex:0 1 auto; }
.pd-nostock{ margin:0; font-size:16px; color:#8a8578; }
.pd-foot{ display:flex; align-items:center; gap:10px; padding-top:20px; border-top:1px solid rgba(26,23,18,.12); }
.pd-formato{ font-size:17px; }
.pd-stock{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#4a473f; }
.pd-stock .dot{ width:7px; height:7px; border-radius:50%; background:#7d9a6e; display:block; }
.pd-stock.is-out .dot{ background:#b36b5e; }

#pd-serv{ background:#ffffff; border-top:1px solid rgba(26,23,18,.14); border-bottom:1px solid rgba(26,23,18,.14); padding:20px 72px; }
/* las cuatro frases completas no caben a 14px en 1440: 13px y hueco menor las
   dejan en una sola linea, como en el diseno */
#pd-serv > div{ max-width:1296px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap; }
#pd-serv > div > span{ display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.05em; color:#4a473f; }

#pd-ficha{ background:#ffffff; padding:96px 72px 104px; }
.pd-ficha-in{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; }
.pd-ficha-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:34px; }
.pd-ficha-head h2{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:52px; line-height:1; }
.pd-ficha-head span{ font-size:16px; color:#8a8578; }
.pd-row{ display:grid; grid-template-columns:280px 1fr; gap:56px; padding:44px 0; border-top:1px solid rgba(26,23,18,.16); align-items:start; }
.pd-row:last-child{ border-bottom:1px solid rgba(26,23,18,.16); }
.pd-row-label{ display:flex; align-items:baseline; gap:16px; }
.pd-num{ font-family:'Poppins',sans-serif; font-weight:500; font-size:14px; color:#a5824a; }
.pd-row-label h3{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:400; font-size:22px; letter-spacing:.04em; text-transform:uppercase; }
.pd-row-body p{ margin:0; }
.pd-props ul{ margin:0; padding:0 0 0 26px; display:grid; gap:20px 48px; list-style:disc; }
.pd-props li{ font-family:'Encode Sans',sans-serif; font-weight:300; line-height:1.3; color:#1a1712; }
.pd-props li::marker{ color:#c8a25b; font-size:.7em; }
/* lista unica: dos columnas y cuerpo segun cuantas vinetas haya */
.pd-props--lista ul{ grid-template-columns:1fr 1fr; }
.pd-props--lg li{ font-size:27px; }
.pd-props--md ul{ gap:16px 48px; }
.pd-props--md li{ font-size:21px; line-height:1.4; }
.pd-props--sm ul{ gap:13px 48px; }
.pd-props--sm li{ font-size:18px; line-height:1.45; }
/* packs: un bloque por producto, dos columnas de bloques */
.pd-props--grupos{ display:grid; grid-template-columns:1fr 1fr; gap:34px 48px; align-items:start; }
.pd-pgrupo{ display:flex; flex-direction:column; gap:14px; break-inside:avoid; }
.pd-pgrupo h4{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:400; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#a5824a; }
.pd-props--grupos ul{ grid-template-columns:1fr; gap:11px; }
.pd-props--grupos li{ font-size:18px; line-height:1.45; }
.pd-modo p{ max-width:760px; font-size:19px; line-height:1.8; color:#4a473f; text-wrap:pretty; }
.pd-inci p{ font-size:14px; line-height:1.9; letter-spacing:.03em; color:#6b6659; column-count:2; column-gap:48px; }

#pd-relwrap{ background:#1a1712; color:#f5f1e8; padding:88px 72px 96px; }
.pd-rel-in{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:40px; }
.pd-rel-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.pd-rel-head h2{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:44px; line-height:1; color:#f5f1e8; }
.pd-rel-head .sl-underline{ color:#f5f1e8; }
#pd-rel{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
#pd-rel .pitem{ display:flex; flex-direction:column; gap:14px; }
#pd-rel .pcard{ display:block; position:relative; aspect-ratio:1/1; background:#2a251f; overflow:hidden; }
#pd-rel .pcard img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-rel-name{ font-size:18px; color:#f5f1e8; transition:color .3s ease; }
#pd-rel .pitem:hover .pd-rel-name{ color:#c8a25b; }
.pd-rel-price{ font-size:17px; color:#c8a25b; }
.pd-rel-price del{ font-size:14px; color:rgba(245,241,232,.45); margin-right:8px; }
.pd-rel-price ins{ text-decoration:none; background:none; color:#c8a25b; }

#pd-seo{ background:#ffffff; border-top:1px solid rgba(26,23,18,.08); padding:96px 72px; }
.pd-seo-in{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:340px 1fr; gap:72px; align-items:start; }
.pd-seo-side{ display:flex; flex-direction:column; gap:16px; }
.pd-seo-side h2{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:40px; line-height:1.06; }
.pd-seo-body{ display:flex; flex-direction:column; gap:32px; max-width:820px; }
.pd-seo-intro{ margin:0; font-size:19px; line-height:1.8; color:#4a473f; text-wrap:pretty; }
.pd-seo-block{ display:flex; flex-direction:column; gap:10px; }
.pd-seo-block h3{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:400; font-size:21px; letter-spacing:.02em; }
.pd-seo-block p{ margin:0; font-size:18px; line-height:1.8; color:#4a473f; text-wrap:pretty; }
#pd-seo a{ color:#a5824a; border-bottom:1px solid rgba(165,130,74,.4); }

#pd-formwrap{ background:#ffffff; border-top:1px solid rgba(26,23,18,.08); padding:88px 72px; }
.pd-form-in{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1.15fr; gap:72px; align-items:start; }
.pd-form-side{ display:flex; flex-direction:column; gap:18px; }
.pd-form-side h2{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:44px; line-height:1.06; }
.pd-form-side p{ margin:0; max-width:400px; font-size:18px; line-height:1.7; color:#4a473f; }
.pd-mail{ align-self:flex-start; margin-top:6px; font-size:17px; color:#a5824a; border-bottom:1px solid rgba(165,130,74,.5); padding-bottom:3px; }
#pd-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#pd-form input:not([type="checkbox"]), #pd-form textarea{ font-family:'Encode Sans',sans-serif; font-size:16px; color:#1a1712; background:#ffffff; border:1px solid rgba(26,23,18,.18); border-radius:4px; padding:14px 16px; outline:none; width:100%; }
#pd-form input::placeholder, #pd-form textarea::placeholder{ color:#9a958a; }
#pd-form input:focus, #pd-form textarea:focus{ border-color:#c8a25b; }
.pd-full{ grid-column:1 / -1; }
.pd-check{ display:flex; align-items:center; gap:11px; font-size:15px; color:#4a473f; }
.pd-check input{ width:15px; height:15px; accent-color:#1a1712; flex:none; }
.pd-check a{ color:#a5824a; }
.pd-send{ justify-self:start; margin-top:6px; padding:17px 40px; font-size:15px; letter-spacing:.18em; }

/* barra de compra fija */
#pd-bar{ position:fixed; left:0; right:0; bottom:0; z-index:9990; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid rgba(26,23,18,.1); transform:translateY(110%); transition:transform .5s cubic-bezier(.16,1,.3,1); }
#pd-bar.show{ transform:translateY(0); }
#pd-bar > div{ max-width:1240px; margin:0 auto; padding:14px 72px; display:flex; align-items:center; gap:22px; font-family:'Encode Sans',sans-serif; }
.pd-bar-img{ flex:none; width:54px; height:54px; overflow:hidden; background:#f2efe9; display:block; }
.pd-bar-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-bar-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pd-bar-name{ font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-bar-meta{ font-size:14px; color:#8a8578; }
.pd-bar-price{ flex:none; font-size:21px; color:#1a1712; white-space:nowrap; }
.pd-bar-price del{ font-size:14px; color:#9a958a; margin-right:8px; }
.pd-bar-price ins{ text-decoration:none; background:none; }
#pd-bar .cta{ flex:none; padding:15px 32px; font-size:15px; }

/* lightbox */
#pd-lightbox{ position:fixed; inset:0; z-index:12500; background:rgba(16,16,16,.94); display:none; align-items:center; justify-content:center; padding:40px; cursor:zoom-out; }
#pd-lightbox.open{ display:flex; }
#pd-lightbox img{ max-width:min(1100px, 92vw); max-height:88vh; object-fit:contain; display:block; }
.pd-lb-close{ position:absolute; top:22px; right:26px; background:none; border:none; color:#f5f1e8; font-size:22px; line-height:1; padding:10px; cursor:pointer; }

/* ============================================================
   3 · RESPONSIVE
   ============================================================ */

@media (max-width:1200px){
  #cat-body{ grid-template-columns:1fr; gap:28px; }
  #cat-grid{ grid-template-columns:repeat(3,1fr); }
  /* en tableta, 3 por fila; pero con 4 mosaicos eso deja un huérfano feo:
     esos van 2×2. La clase la escribe la plantilla con el número real. */
  #cat-subs{ grid-template-columns:repeat(3,1fr); }
  /* 2 columnas, pero del mismo ancho que tendrían siendo 3, y la rejilla
     centrada como bloque: así el mosaico no se hincha ni deja un hueco raro */
  #cat-subs.subs-4, #cat-subs.subs-2{ grid-template-columns:repeat(2, minmax(0, 305px)); }
  .sl-filtoggle{ display:inline-flex; align-self:flex-start; }
  .sl-side{ display:none; position:static; }
  .sl-side.is-open{ display:grid; grid-template-columns:repeat(2,minmax(200px,1fr)); gap:26px 40px; padding:24px 0 4px; border-bottom:1px solid rgba(26,23,18,.13); }
  #cat-hero h1{ font-size:52px; }
  .cat-hero-txt{ padding:44px 40px; }
  #cat-seo{ gap:48px; padding:80px 40px; }
  #cat-seo h2, #cat-faq h2{ font-size:44px; }
  #cat-subs-wrap, #cat-body{ padding-left:40px; padding-right:40px; }
  .cat-hero-img{ min-height:380px; }
}

@media (max-width:1100px){
  #pd-main{ grid-template-columns:1fr; gap:40px; padding:36px 40px 72px; }
  #pd-rel{ grid-template-columns:repeat(2,1fr); }
  .pd-form-in, .pd-seo-in{ grid-template-columns:1fr; gap:40px; }
  .pd-props--lista ul, .pd-props--grupos{ grid-template-columns:1fr; }
  .pd-row{ grid-template-columns:1fr; gap:20px; }
  #pd-ficha, #pd-relwrap, #pd-formwrap, #pd-seo, #pd-serv{ padding-left:40px; padding-right:40px; }
  #pd-bar > div{ padding:14px 40px; }
  .pd-ficha-head{ flex-wrap:wrap; gap:12px; }
  .pd-ficha-head h2{ font-size:44px; }
}

@media (max-width:720px){
  /* categoria */
  #cat-hero{ grid-template-columns:1fr; }
  .cat-hero-txt{ padding:36px 24px 40px; gap:16px; }
  #cat-hero h1{ font-size:38px; }
  .cat-hero-intro{ font-size:17px; }
  .cat-hero-img{ min-height:280px; height:280px; order:-1; }
  #cat-subs-wrap{ padding:40px 24px 4px; }
  .cat-subs-head{ flex-wrap:wrap; gap:12px; }
  #cat-subs{ grid-template-columns:repeat(2,1fr); }
  #cat-body{ padding:32px 24px 72px; }
  .sl-side.is-open{ grid-template-columns:1fr; }
  #cat-grid{ grid-template-columns:repeat(2,1fr); gap:26px 14px; }
  .sl-pname{ font-size:16px; }
  .sl-pprice{ font-size:15px; }
  .sl-padd{ font-size:13px; padding:12px 10px; letter-spacing:.12em; }
  .cat-results-head{ gap:14px; }
  .cat-order select{ padding:9px 30px 9px 14px; font-size:14px; }
  #cat-seo{ grid-template-columns:1fr; gap:28px; padding:64px 24px; }
  /* en una sola columna no tiene sentido dejar fija la cabecera del bloque */
  #cat-seo .cat-seo-side, #pd-seo .pd-seo-side, .sl-side{ position:static; }
  #cat-seo h2, #cat-faq h2{ font-size:32px; }
  .cat-seo-block p, .cat-faq-list p{ font-size:17px; }
  #cat-faq{ padding:64px 24px; gap:32px; }
  .cat-faq-list summary{ font-size:18px; }
  .sl-news--shop{ padding:64px 24px; }
  .sl-news--shop h2{ font-size:32px; }
  .sl-newsform{ flex-direction:column; }
  .sl-newsform button{ width:100%; }

  /* ficha */
  #pd-main{ padding:24px 24px 64px; gap:32px; }
  #pd-media-d{ flex-direction:column-reverse; gap:10px; }
  .pd-thumbs{ width:100%; flex-direction:row; overflow-x:auto; scrollbar-width:none; }
  .pd-thumbs::-webkit-scrollbar{ display:none; }
  .pd-thumbs .thumb{ flex:0 0 64px; }
  #pd-buy h1{ font-size:32px; }
  .pd-price{ font-size:28px; }
  .pd-short p{ font-size:17px; }
  .pd-cart .cta{ flex:1 1 auto; padding:15px 20px; }
  #pd-serv{ padding:18px 24px; }
  #pd-serv > div{ gap:14px; }
  #pd-serv > div > span{ font-size:13px; }
  #pd-ficha{ padding:56px 24px 64px; }
  .pd-ficha-head h2{ font-size:32px; }
  .pd-props li{ font-size:21px; }
  .pd-modo p{ font-size:17px; }
  .pd-inci p{ column-count:1; }
  #pd-relwrap{ padding:56px 24px 64px; }
  .pd-rel-head{ flex-wrap:wrap; gap:12px; }
  .pd-rel-head h2{ font-size:30px; }
  #pd-rel{ gap:16px; }
  .pd-rel-name{ font-size:16px; }
  #pd-seo, #pd-formwrap{ padding:56px 24px; }
  .pd-seo-side h2, .pd-form-side h2{ font-size:30px; }
  .pd-seo-block p{ font-size:17px; }
  #pd-form{ grid-template-columns:1fr; }
  #pd-bar > div{ padding:12px 20px; gap:14px; }
  .pd-bar-txt{ display:none; }
  #pd-bar .cta{ padding:13px 22px; font-size:13px; letter-spacing:.12em; }
  #pd-lightbox{ padding:20px; }
}

/* ============================================================
   TEXTOS LEGALES
   ============================================================ */
#lg-hero{ background:#f7f5f1; border-bottom:1px solid rgba(26,23,18,.1); padding:72px 72px 56px; display:flex; flex-direction:column; gap:18px; }
#lg-hero h1{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:200; font-size:56px; line-height:1.02; color:#1a1712; }
.lg-hero-meta{ display:flex; align-items:center; gap:20px; font-size:14px; color:#8a8578; }
#lg-body{ display:grid; grid-template-columns:260px 1fr; gap:72px; padding:72px 72px 104px; background:#ffffff; align-items:start; }
.lg-side{ display:flex; flex-direction:column; gap:14px; position:sticky; top:120px; align-self:start; opacity:1 !important; transform:none !important; }
.lg-side a{ font-size:16px; line-height:1.4; color:#6b6659; transition:color .3s ease; }
.lg-side a:hover{ color:#a5824a; opacity:1; }
.lg-side a.is-active{ color:#1a1712; border-left:2px solid #c8a25b; padding-left:12px; margin-left:-14px; }
.lg-contacto{ margin-top:12px; padding-top:18px; border-top:1px solid rgba(26,23,18,.13); font-size:15px !important; color:#a5824a !important; }
.lg-content{ max-width:820px; min-width:0; }
.lg-content h2{ margin:38px 0 14px; font-family:'Encode Sans',sans-serif; font-weight:400; font-size:22px; line-height:1.35; letter-spacing:.02em !important; text-transform:none !important; color:#1a1712; }
.lg-content p{ margin:0 0 16px; font-size:16px; line-height:1.85; color:#4a473f; }
.lg-content ul, .lg-content ol{ margin:0 0 20px; padding-left:22px; }
.lg-content li{ font-size:16px; line-height:1.85; color:#4a473f; margin-bottom:8px; }
.lg-content li::marker{ color:#c8a25b; }
.lg-content a{ color:#a5824a; border-bottom:1px solid rgba(165,130,74,.4); overflow-wrap:anywhere; }
.lg-content strong{ font-weight:500; color:#1a1712; }
@media (max-width:1100px){
  #lg-body{ grid-template-columns:1fr; gap:40px; padding:56px 40px 80px; }
  .lg-side{ position:static; flex-direction:row; flex-wrap:wrap; gap:10px 22px; }
  .lg-side .sl-label-sm{ flex:1 0 100%; }
  .lg-side a.is-active{ border-left:0; padding-left:0; margin-left:0; border-bottom:2px solid #c8a25b; }
  #lg-hero{ padding:56px 40px 44px; }
  #lg-hero h1{ font-size:44px; }
}
@media (max-width:720px){
  #lg-hero{ padding:40px 24px 32px; }
  #lg-hero h1{ font-size:34px; }
  #lg-body{ padding:40px 24px 64px; }
  .lg-content p, .lg-content li{ font-size:15px; }
}

/* el aviso del formulario de contacto va en la misma fila que el boton */
#ct-form .sl-notice{ margin:0; padding:10px 16px; font-size:14px; }

/* ==== PAGINAS DE CONTENIDO (compromiso, nosotros, filosofia, ingredientes, consejos, contacto) ==== */
/* Generado por tools/convert_pages.mjs desde los .dc.html del handoff. */
.zoom { overflow:hidden; }
.zoom img { transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.zoom:hover img { transform:scale(1.05); }
.cta { transition: background .35s ease, color .35s ease, border-color .35s ease; }
.cta:hover { background:#c8a25b !important; border-color:#c8a25b !important; color:#1a1712 !important; }
@media (max-width:1100px){
  #cp-hero h1 { font-size:64px !important; }
  #cp-hero img { width:100% !important; opacity:.35; }
  #cp-statement p { font-size:32px !important; }
  .cp-duo { grid-template-columns:1fr !important; }
  .cp-duo > div:first-child { min-height:460px !important; }
  .cp-duo > div[data-txt] { order:2 !important; }
  #cp-hist > div { padding:88px 24px !important; }
  #cp-hist p { font-size:32px !important; }
  #cp-trendgrid { grid-template-columns:repeat(2,1fr) !important; }
  #cp-trendgrid > div:nth-child(5) { display:none !important; }
}
@media (max-width:720px){
  #cp-hero { min-height:78vh !important; }
  #cp-hero h1 { font-size:44px !important; letter-spacing:0 !important; }
  #cp-hero > div:last-child { padding:0 24px 48px !important; }
  #cp-statement { padding:80px 24px !important; }
  #cp-statement p { font-size:26px !important; }
  .cp-duo > div[data-txt] { padding:64px 24px !important; }
  #cp-hist p { font-size:26px !important; }
  #cp-trend { padding:64px 24px 72px !important; }
}
#sl-stage h1:not(.hkick):not(.elementor-heading-title), #sl-stage h2:not(.elementor-heading-title), #sl-stage .hclaim { text-transform:uppercase; letter-spacing:.05em; }
.nos-tile img { transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.nos-tile:hover img { transform:scale(1.06); }
.igt { position:relative; display:block; overflow:hidden; background:#f2efe9; }
.igt img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.igt:hover img { transform:scale(1.06); }
@media (max-width:1100px){
  #ab-hero h1 { font-size:60px !important; }
  #ab-hero > img, #ab-hero > picture > img { width:100% !important; opacity:.3; }
  #ab-card { left:auto !important; right:24px !important; transform:none !important; bottom:auto !important; top:24px !important; width:180px !important; }
  #ab-story { grid-template-columns:1fr !important; gap:32px !important; }
  #ab-intro > span:nth-child(2) { font-size:44px !important; }
  #ab-intro > span:nth-child(3) { font-size:21px !important; }
  #ab-split { grid-template-columns:1fr !important; }
  #ab-ig { grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:1100px){
  #nos-tiles { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:720px){
  #nos-compromiso { padding:64px 24px !important; }
  #nos-tiles { grid-template-columns:1fr !important; }
  #ab-hero { min-height:74vh !important; }
  #ab-hero > div:last-child { padding:0 24px 48px !important; }
  #sl-stage h1:not(.hkick):not(.elementor-heading-title), #sl-stage .hclaim { font-size:44px !important; }
  #ab-storywrap, #ab-igwrap { padding:64px 24px !important; }
  #ab-split > div:last-child { padding:56px 24px !important; }
}
@media (max-width:1100px){
  #fl-hero h1 { font-size:72px !important; }
  #fl-statement p { font-size:32px !important; }
  #fl-duo { grid-template-columns:1fr !important; }
  #fl-duo > div:first-child { min-height:460px !important; }
  #fl-quote > div { padding:88px 24px !important; }
  #fl-quote p { font-size:32px !important; }
  #cp-trendgrid { grid-template-columns:repeat(2,1fr) !important; }
  #cp-trendgrid > div:nth-child(5) { display:none !important; }
}
@media (max-width:720px){
  #fl-hero { min-height:78vh !important; }
  #fl-hero h1 { font-size:46px !important; letter-spacing:0 !important; }
  #fl-hero > div:last-child { padding:0 24px 48px !important; }
  #fl-statement { padding:80px 24px !important; }
  #fl-statement p { font-size:26px !important; }
  #fl-duo > div:last-child { padding:64px 24px !important; }
  #fl-quote p { font-size:26px !important; }
  #cp-trend { padding:64px 24px 72px !important; }
}
@media (max-width:1360px){
  #ab-card { left:24px !important; }
}
@media (max-width:1100px){
  #ab-hero { grid-template-columns:1fr !important; }
  #ab-hero > div:last-child { min-height:420px !important; }
  #ab-card { position:static !important; width:auto !important; max-width:340px; margin:-40px 24px 0 !important; }
  #ab-story { grid-template-columns:1fr !important; gap:32px !important; }
  #ab-intro > span:nth-child(2) { font-size:44px !important; }
  #ab-intro > span:nth-child(3) { font-size:21px !important; }
  #ab-split { grid-template-columns:1fr !important; }
  #ab-ig { grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:720px){
  #ab-hero > div:first-child { padding:56px 24px !important; }
  #sl-stage h1:not(.hkick):not(.elementor-heading-title), #sl-stage .hclaim { font-size:40px !important; }
  #ab-storywrap, #ab-igwrap { padding:64px 24px !important; }
  #ab-split > div:last-child { padding:56px 24px !important; }
}
@media (min-width:1201px){
  #ig-grid article:nth-of-type(even) { grid-template-columns:1fr 480px !important; }
}
.ig-tile img { transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.ig-tile:hover img { transform:scale(1.06); }
.ing-pill { transition:border-color .3s ease, color .3s ease; }
.ing-pill:hover { border-color:#c8a25b !important; color:#1a1712 !important; }
#ig-grid nav a { transition:color .3s ease; }
#ig-grid nav a:hover { color:#a5824a !important; }
@media (max-width:1100px){
  #ig-hero h1 { font-size:56px !important; }
  #ig-hero img { width:100% !important; opacity:.35; }
  #ig-statement p { font-size:32px !important; }
  #ig-index > div { grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:720px){
  #ig-hero { min-height:78vh !important; }
  #ig-hero h1 { font-size:42px !important; letter-spacing:0 !important; }
  #ig-hero > div:last-child { padding:0 24px 48px !important; }
  #ig-statement { padding:80px 24px 64px !important; }
  #ig-statement p { font-size:26px !important; }
  #ig-index { padding:0 24px 64px !important; }
  #ig-index > div { grid-template-columns:repeat(2,1fr) !important; }
  .ing-row h3 { font-size:30px !important; }
  .ing-row span[style*="text-stroke"] { font-size:52px !important; }
}
@media (max-width:1200px){
  #ig-grid { grid-template-columns:1fr !important; gap:40px !important; }
  #ig-grid nav { position:static !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; }
  .ing-row { scroll-margin-top:70px; grid-template-columns:1fr !important; gap:28px !important; }
  .ing-row > div { order:0 !important; grid-column:auto !important; grid-row:auto !important; }
  .ing-row > div[style*="rotate"] { max-width:420px; margin:0 auto; }
  .ing-row > div:first-child { max-width:420px; }
}
@media (max-width:720px){
  #ig-body { padding:0 24px 72px !important; }
}
.igt { position:relative; display:block; overflow:hidden; background:#fafafa; }
.cs-tile img { transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.cs-tile:hover img { transform:scale(1.06); }
.cs-card { transition:border-color .35s ease, background .35s ease; }
.cs-card:hover { border-color:#c8a25b !important; background:#faf8f4; }
#cs-grid nav a { transition:color .3s ease; }
#cs-grid nav a:hover { color:#a5824a !important; }
@media (max-width:1100px){
  #cs-hero h1 { font-size:64px !important; }
  #cs-hero img { width:100% !important; opacity:.35; }
  #cs-statement p { font-size:32px !important; }
  #cs-index > div { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:720px){
  #cs-hero { min-height:78vh !important; }
  #cs-hero h1 { font-size:44px !important; letter-spacing:0 !important; }
  #cs-hero > div:last-child { padding:0 24px 48px !important; }
  #cs-statement { padding:80px 24px 64px !important; }
  #cs-statement p { font-size:26px !important; }
  #cs-index { padding:0 24px 64px !important; }
  #cs-index > div { grid-template-columns:1fr !important; }
}
@media (max-width:1200px){
  #cs-grid { grid-template-columns:1fr !important; gap:40px !important; }
  #cs-grid nav { position:static !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; }
  .cs-row > div:last-child { grid-template-columns:1fr !important; gap:32px !important; }
  .cs-row div[style*="sticky"] { position:static !important; max-width:520px; }
  .cs-row > .zoom { height:320px !important; }
}
@media (max-width:720px){
  #cs-body { padding:0 24px 72px !important; }
  .cs-row h2 { font-size:34px !important; }
  .cs-row > div:first-child > div:first-child > span:first-child { font-size:56px !important; }
  #cs-grid nav { grid-template-columns:1fr !important; }
}
.ct-field { width:100%; border:0; border-bottom:1px solid #000000; background:transparent; padding:16px 2px; font-family:'Encode Sans',sans-serif; font-size:18px; color:#1a1712; outline:none; transition:border-color .3s ease; }
.ct-field:focus { border-bottom-color:#c8a25b; }
.ct-field::placeholder { font-weight:400; }
.ct-field::placeholder { color:#8a8578; }
textarea.ct-field { resize:vertical; min-height:120px; }
@media (max-width:1100px){
  #ct-hero h1 { font-size:64px !important; }
  #ct-hero img { width:100% !important; opacity:.35; }
  #ct-grid { grid-template-columns:1fr !important; gap:56px !important; }
  #ct-form > div:first-child { grid-template-columns:1fr !important; }
}
@media (max-width:720px){
  #ct-hero { min-height:70vh !important; }
  #ct-hero h1 { font-size:46px !important; letter-spacing:0 !important; }
  #ct-hero > div:last-child { padding:0 24px 48px !important; }
  #ct-body { padding:64px 24px 80px !important; }
}


/* ==== buscador de la cabecera ==== */
/* <details> nativo: funciona sin JS y sobrevive al clon de la barra fija
   (cloneNode no copia manejadores, por eso nada de botones con listener) */
.sl-busca{ position:relative; display:inline-flex; }
/* el panel se cuelga de la FILA de iconos, no de la lupa: colgado de la lupa se
   salia por la izquierda en movil (la caja mide mas que lo que queda a su izq.).
   Con @supports el navegador viejo se queda con el anclaje simple de arriba. */
@supports selector(:has(*)){
  .sl-busca{ position:static; }
  #sl-hero div:has(> .sl-busca), #sl-mini div:has(> .sl-busca){ position:relative; }
}
.sl-busca > summary{ display:inline-flex; align-items:center; cursor:pointer; list-style:none; }
.sl-busca > summary::-webkit-details-marker{ display:none; }
.sl-busca[open] > summary{ opacity:.6; }
.sl-busca-caja{ position:absolute; top:calc(100% + 14px); right:0; z-index:60; display:flex; gap:8px; padding:12px; width:min(340px, calc(100vw - 32px)); background:#ffffff; border:1px solid rgba(26,23,18,.14); box-shadow:0 18px 40px rgba(26,23,18,.12); }
.sl-busca-caja input[type="search"]{ flex:1 1 auto; min-width:0; padding:11px 12px; border:1px solid rgba(26,23,18,.18); border-radius:4px; background:#ffffff; font-family:'Encode Sans',sans-serif; font-size:15px; color:#1a1712; }
.sl-busca-caja input[type="search"]:focus{ border-color:#c8a25b; outline:none; }
.sl-busca-caja button{ flex:0 0 auto; border:none; border-radius:100px; padding:11px 18px; background:#1a1712; color:#ffffff; font-family:'Encode Sans',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .3s ease, color .3s ease; }
.sl-busca-caja button:hover{ background:#c8a25b; color:#1a1712; }

/* buscador dentro del menu movil */
/* el pie del menu es una fila sin envolver: el buscador necesita su linea */
.slm-foot{ flex-wrap:wrap; }
.slm-busca{ display:flex; gap:8px; flex:0 0 100%; margin:0 0 4px; }
.slm-busca input[type="search"]{ flex:1 1 auto; min-width:0; padding:12px 14px; border:1px solid rgba(255,255,255,.28); border-radius:4px; background:rgba(255,255,255,.06); font-family:'Encode Sans',sans-serif; font-size:15px; color:#ffffff; }
.slm-busca input[type="search"]::placeholder{ color:rgba(255,255,255,.55); }
.slm-busca input[type="search"]:focus{ border-color:#c8a25b; outline:none; }
.slm-busca button{ flex:0 0 auto; border:none; border-radius:100px; padding:12px 18px; background:#c8a25b; color:#1a1712; font-family:'Encode Sans',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }

/* ==== resultados de búsqueda (misma plantilla que la tienda, sin su hero) ==== */
#bs-hero{ background:#f7f5f1; border-bottom:1px solid rgba(26,23,18,.1); padding:56px 72px 46px; }
.bs-hero-in{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
#bs-hero h1{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:200; font-size:48px; line-height:1.05; color:#1a1712; }
.bs-hero-num{ margin:0; font-size:16px; color:#6b6659; }
.bs-hero-form{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; max-width:520px; }
.bs-hero-form input[type="search"]{ flex:1 1 240px; min-width:0; padding:14px 15px; border:1px solid rgba(26,23,18,.2); border-radius:4px; background:#ffffff; font-family:'Encode Sans',sans-serif; font-size:16px; color:#1a1712; }
.bs-hero-form input[type="search"]:focus{ border-color:#c8a25b; outline:none; }
.bs-hero-form .sl-btn{ flex:0 0 auto; padding:14px 28px; }

@media (max-width:1100px){ #bs-hero{ padding:46px 40px 38px; } #bs-hero h1{ font-size:38px; } }
@media (max-width:720px){
  #bs-hero{ padding:32px 24px 28px; }
  #bs-hero h1{ font-size:29px; }
  .bs-hero-form .sl-btn{ flex:1 1 100%; }
}


/* ==== COMPRA: carrito, finalizar compra y mi cuenta ==== */
/* No se toca el marcado de WooCommerce (bloques o clasico), solo se viste.
   Por eso hay reglas duplicadas: .wc-block-* para el carrito/pago por bloques
   y .woocommerce * para "mi cuenta" y para instalaciones con shortcode. */

/* Nada de revelado-al-scroll dentro de la compra: los bloques de Woo montan y
   desmontan nodos en cliente y los titulares (p.ej. el del carrito vacío) se
   quedaban con opacity:0 para siempre. Aquí todo visible, sin ceremonia. */
#wc-body .sl-reveal{ opacity:1 !important; transform:none !important; }

#wc-hero{ background:#f7f5f1; border-bottom:1px solid rgba(26,23,18,.1); padding:64px 72px 48px; }
.wc-hero-in{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
#wc-hero h1{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:200; font-size:52px; line-height:1.02; color:#1a1712; }
.wc-pasos{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:14px 40px; }
.wc-pasos li{ display:inline-flex; align-items:baseline; gap:10px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#a09b8f; }
.wc-paso-num{ font-family:'Poppins',sans-serif; font-weight:500; font-size:12px; color:#c8a25b; }
.wc-pasos li.is-hecho{ color:#6b6659; }
.wc-pasos li.is-actual{ color:#1a1712; }
.wc-pasos li.is-actual .wc-paso-num{ color:#a5824a; }

#wc-body{ background:#ffffff; padding:64px 72px 104px; }
.wc-body-in{ max-width:1240px; margin:0 auto; }
.wc-body-in .alignwide, .wc-body-in .alignfull{ max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }

/* ---- tipografia dentro del contenido de Woo ---- */
.wc-body-in, .wc-body-in .wc-block-components-title, .wc-body-in .wc-block-components-button,
.wc-body-in input, .wc-body-in select, .wc-body-in textarea, .wc-body-in button{
  font-family:'Encode Sans', sans-serif;
}
.wc-body-in h2, .wc-body-in .wc-block-components-title{ font-weight:300 !important; color:#1a1712; letter-spacing:.02em !important; text-transform:none !important; }
.wc-body-in h2{ font-size:26px; margin:0 0 18px; }
.wc-body-in .wc-block-components-title{ font-size:22px !important; }
.wc-body-in p, .wc-body-in li, .wc-body-in td, .wc-body-in th{ color:#4a473f; }

/* ---- botones (bloques y clasico) ---- */
.wc-body-in .wc-block-components-button:not(.is-link),
.wc-body-in .woocommerce a.button, .wc-body-in .woocommerce button.button,
.wc-body-in .woocommerce input.button, .wc-body-in button.button, .wc-body-in a.button,
.wc-body-in .woocommerce-button{
  background:#1a1712 !important; color:#ffffff !important; border:none !important; border-radius:100px !important;
  padding:15px 34px !important; font-size:14px !important; letter-spacing:.16em !important; text-transform:uppercase !important;
  font-weight:400 !important; line-height:1.2 !important; transition:background .35s ease, color .35s ease; cursor:pointer;
}
.wc-body-in .wc-block-components-button:not(.is-link):hover,
.wc-body-in .woocommerce a.button:hover, .wc-body-in .woocommerce button.button:hover,
.wc-body-in .woocommerce input.button:hover, .wc-body-in button.button:hover, .wc-body-in a.button:hover,
.wc-body-in .woocommerce-button:hover{ background:#c8a25b !important; color:#1a1712 !important; opacity:1; }
.wc-body-in .wc-block-components-button__text{ color:inherit !important; }
.wc-body-in .wc-block-components-button.is-link, .wc-body-in a.wc-block-components-checkout-return-to-cart-button{
  color:#a5824a !important; text-decoration:none; border-bottom:1px solid rgba(165,130,74,.45); border-radius:0 !important;
  padding:0 !important; background:none !important; font-size:14px !important; letter-spacing:.04em !important; text-transform:none !important;
}

/* ---- campos ---- */
.wc-body-in .wc-block-components-text-input input, .wc-body-in .wc-block-components-textarea,
.wc-body-in .woocommerce form .form-row input.input-text, .wc-body-in .woocommerce form .form-row textarea,
.wc-body-in .select2-container .select2-selection--single, .wc-body-in .wc-blocks-components-select__container,
.wc-body-in input[type="text"], .wc-body-in input[type="email"], .wc-body-in input[type="tel"],
.wc-body-in input[type="password"], .wc-body-in select{
  border:1px solid rgba(26,23,18,.18) !important; border-radius:4px !important; background:#ffffff !important;
  font-family:'Encode Sans',sans-serif !important; font-size:16px !important; color:#1a1712 !important; box-shadow:none !important;
}
.wc-body-in .wc-block-components-text-input.is-active input:focus, .wc-body-in input:focus, .wc-body-in select:focus, .wc-body-in textarea:focus{
  border-color:#c8a25b !important; outline:none !important; box-shadow:none !important;
}
.wc-body-in .wc-block-components-text-input label, .wc-body-in .woocommerce form .form-row label{ color:#8a8578 !important; }
.wc-body-in input[type="checkbox"], .wc-body-in input[type="radio"]{ accent-color:#1a1712; }

/* ---- carrito por bloques ---- */
.wc-body-in .wc-block-cart{ margin:0; }
.wc-body-in .wc-block-cart-items{ border-top:1px solid rgba(26,23,18,.14); }
.wc-body-in .wc-block-cart-items th{ font-size:12px !important; letter-spacing:.2em; text-transform:uppercase; color:#8a8578 !important; font-weight:400 !important; }
.wc-body-in .wc-block-cart-items__row{ border-bottom:1px solid rgba(26,23,18,.1); }
.wc-body-in .wc-block-cart-item__image img{ border-radius:0; background:#f2efe9; }
.wc-body-in .wc-block-components-product-name{ font-size:18px !important; color:#1a1712 !important; font-weight:400 !important; }
.wc-body-in .wc-block-components-product-price__value, .wc-body-in .wc-block-components-totals-item__value{ color:#1a1712; }
.wc-body-in .wc-block-components-formatted-money-amount{ font-variant-numeric:tabular-nums; }
.wc-body-in .wc-block-cart__totals-title, .wc-body-in .wc-block-components-totals-wrapper{ border-color:rgba(26,23,18,.14) !important; }
.wc-body-in .wc-block-components-sidebar .wc-block-components-panel,
.wc-body-in .wc-block-cart__sidebar .wc-block-components-totals-wrapper{ background:#f7f5f1; }
.wc-body-in .wc-block-cart__sidebar{ background:#f7f5f1; padding:32px 28px; }
.wc-body-in .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:26px !important; font-weight:300 !important; }
.wc-body-in .wc-block-components-quantity-selector{ border:1px solid rgba(26,23,18,.24) !important; border-radius:100px !important; }
.wc-body-in .wc-block-components-quantity-selector__button{ color:#1a1712 !important; }
.wc-body-in .wc-block-cart-item__remove-link{ color:#8a8578 !important; }
.wc-body-in .wc-block-cart-item__remove-link:hover{ color:#b36b5e !important; }

/* ---- finalizar compra por bloques ---- */
.wc-body-in .wc-block-checkout__form .wc-block-components-checkout-step{ border:none; padding-left:0; }
.wc-body-in .wc-block-components-checkout-step__title{ font-family:'Encode Sans',sans-serif !important; font-weight:300 !important; font-size:22px !important; color:#1a1712 !important; }
.wc-body-in .wc-block-components-checkout-step__heading{ margin-bottom:6px; }
.wc-body-in .wc-block-components-checkout-step__description{ color:#6b6659 !important; }
/* en el checkout el beige lo lleva el panel de dentro: si lo lleva tambien el
   contenedor se ve una caja blanca sobre otra beige. OJO: el relleno va SOLO
   al bloque del resumen, no a cualquier hijo del lateral — el contenedor de
   avisos viene VACIO y con relleno generico metia 56px de hueco en movil. */
.wc-body-in .wc-block-checkout__sidebar{ background:transparent; padding:0; }
.wc-body-in .wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-body-in .wc-block-checkout__sidebar .wc-block-components-order-summary{ background:#f7f5f1; border:none !important; }
.wc-body-in .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{ padding:28px 26px; background:#f7f5f1; }
.wc-body-in .wc-block-checkout__sidebar > .wc-block-components-notices{ padding:0; }
.wc-body-in .wc-block-components-order-summary__button-text{ font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:#1a1712; }
.wc-body-in .wc-block-components-radio-control__option{ border-color:rgba(26,23,18,.14) !important; }
.wc-body-in .wc-block-components-checkout-place-order-button{ width:100%; justify-content:center; }
.wc-body-in .wc-block-components-notice-banner{ border:none !important; border-radius:0 !important; border-left:2px solid #c8a25b !important; background:#f7f5f1 !important; }
.wc-body-in .wc-block-components-notice-banner.is-error{ border-left-color:#b36b5e !important; }
/* el boton de cerrar del aviso caia en la regla generica de botones y salia
   como pastilla oscura de 68x30 con el icono aplastado a 0px de ancho */
.wc-body-in .wc-block-components-notice-banner .wc-block-components-button.wc-block-components-notice-banner__dismiss{
  background:none !important; color:#6b6659 !important; padding:0 !important;
  width:24px; min-width:0 !important; height:24px; border-radius:0 !important;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.wc-body-in .wc-block-components-notice-banner .wc-block-components-button.wc-block-components-notice-banner__dismiss:hover{ background:none !important; color:#1a1712 !important; }
.wc-body-in .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss svg{ width:18px !important; min-width:18px !important; height:18px !important; flex:0 0 auto; fill:currentColor; }

/* ---- gracias por tu compra ---- */
.wc-body-in .woocommerce-order .woocommerce-thankyou-order-received{ font-size:24px; font-weight:300; color:#1a1712; margin-bottom:24px; }
.wc-body-in .woocommerce-order-overview{ list-style:none; display:flex; flex-wrap:wrap; gap:20px 48px; padding:24px 0; margin:0 0 32px; border-top:1px solid rgba(26,23,18,.14); border-bottom:1px solid rgba(26,23,18,.14); }
.wc-body-in .woocommerce-order-overview li{ display:flex; flex-direction:column; gap:6px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#8a8578; }
.wc-body-in .woocommerce-order-overview li strong{ font-size:17px; letter-spacing:normal; text-transform:none; color:#1a1712; font-weight:400; }

/* ---- mi cuenta (shortcode clasico) ---- */
.wc-body-in .woocommerce-MyAccount-navigation{ float:none; width:auto; }
/* .woocommerce-account va en el <body>, no dentro de .wc-body-in: la regla vieja no casaba nunca y el menú quedaba encima a todo el ancho */
body.woocommerce-account.logged-in .wc-body-in .woocommerce{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:56px; align-items:start; }
body.woocommerce-account.logged-in .wc-body-in .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1; }
/* el clearfix de woocommerce-layout (.woocommerce::before/::after con display:table) cuenta como celda de la rejilla y empujaba el menú a la 2.ª columna */
body.woocommerce-account.logged-in .wc-body-in .woocommerce::before, body.woocommerce-account.logged-in .wc-body-in .woocommerce::after{ content:none !important; display:none !important; }
body.woocommerce-account.logged-in .wc-body-in .woocommerce > *{ grid-column:1 / -1; }
body.woocommerce-account.logged-in .wc-body-in .woocommerce > .woocommerce-MyAccount-navigation{ grid-column:1; }
body.woocommerce-account.logged-in .wc-body-in .woocommerce > .woocommerce-MyAccount-content{ grid-column:2; }
@media (max-width:900px){ body.woocommerce-account.logged-in .wc-body-in .woocommerce > .woocommerce-MyAccount-content{ grid-column:1; } }
body.woocommerce-account .wc-body-in .woocommerce-MyAccount-content{ float:none; width:auto; }
@media (max-width:900px){ body.woocommerce-account.logged-in .wc-body-in .woocommerce{ grid-template-columns:1fr; gap:32px; } }
.wc-body-in .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.wc-body-in .woocommerce-MyAccount-navigation li a{ display:block; padding:11px 0; font-size:16px; color:#6b6659; border-bottom:1px solid rgba(26,23,18,.08); transition:color .3s ease; }
.wc-body-in .woocommerce-MyAccount-navigation li a:hover{ color:#a5824a; opacity:1; }
.wc-body-in .woocommerce-MyAccount-navigation li.is-active a{ color:#1a1712; border-bottom-color:#c8a25b; }
.wc-body-in .woocommerce-MyAccount-content{ min-width:0; }
/* el formulario de acceso a lo ancho de 1240 px queda desangelado */
.wc-body-in .woocommerce-form-login, .wc-body-in .woocommerce-form-register{ border:1px solid rgba(26,23,18,.14) !important; border-radius:0 !important; padding:34px !important; max-width:580px; }
/* acceder / recuperar contraseña: la caja de 580 se quedaba pegada al borde
   izquierdo de una columna de 1240. Se estrecha la columna entera (que ya va
   con margin:0 auto) y asi titular y formulario quedan centrados juntos.
   OJO: la clase .woocommerce-account va en el <body>, no dentro de .wc-body-in:
   el selector anterior (.wc-body-in .woocommerce-account ...) no casaba nunca. */
body.woocommerce-account:not(.logged-in) .wc-body-in{ max-width:580px; }
/* producción tiene el registro activado: Acceder y Registrarse en dos columnas (#customer_login), no caben en 580 px */
body.woocommerce-account:not(.logged-in) .wc-body-in:has(#customer_login){ max-width:1040px; }
body.woocommerce-account .wc-body-in #customer_login{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
body.woocommerce-account .wc-body-in #customer_login > .u-column1, body.woocommerce-account .wc-body-in #customer_login > .u-column2{ float:none; width:auto; }
body.woocommerce-account .wc-body-in #customer_login::before, body.woocommerce-account .wc-body-in #customer_login::after{ display:none; }
@media (max-width:760px){ body.woocommerce-account .wc-body-in #customer_login{ grid-template-columns:1fr; gap:32px; } }
.wc-gracias-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin-top:44px; padding-top:32px; border-top:1px solid rgba(26,23,18,.14); }
.wc-gracias-cta p{ margin:0; font-size:17px; color:#6b6659; }
.wc-body-in .woocommerce table.shop_table{ border:1px solid rgba(26,23,18,.14); border-radius:0; border-collapse:collapse; }
.wc-body-in .woocommerce table.shop_table th{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#8a8578; font-weight:400; }
.wc-body-in .woocommerce table.shop_table td, .wc-body-in .woocommerce table.shop_table th{ border-color:rgba(26,23,18,.1); padding:14px 16px; }

@media (max-width:1100px){
  #wc-hero{ padding:52px 40px 40px; }
  #wc-hero h1{ font-size:42px; }
  #wc-body{ padding:48px 40px 80px; }
  .wc-body-in .woocommerce-account .woocommerce{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:720px){
  #wc-hero{ padding:36px 24px 30px; }
  #wc-hero h1{ font-size:32px; }
  .wc-pasos{ gap:10px 22px; }
  .wc-pasos li{ font-size:11px; letter-spacing:.12em; }
  #wc-body{ padding:36px 24px 64px; }
  .wc-body-in .wc-block-cart__sidebar, .wc-body-in .wc-block-checkout__sidebar{ padding:24px 20px; }
}

/* ---- PASO 1 del pago: identificacion (columna centrada, como el ejemplo) ---- */
.sl-ident{ padding:8px 0 40px; }
.sl-ident-caja{ max-width:460px; margin:0 auto; }
.sl-ident-atras{ margin:0 0 30px; font-size:15px; }
.sl-ident-atras a{ display:inline-flex; align-items:center; gap:9px; color:#6b6659; }
.sl-ident-atras a:hover{ color:#a5824a; opacity:1; }
.sl-ident-caja h2{ margin:0 0 26px; font-family:'Encode Sans',sans-serif; font-weight:300 !important; font-size:30px !important; line-height:1.2; color:#1a1712; letter-spacing:0 !important; }
.sl-ident-dato{ margin:-16px 0 22px; font-size:16px; color:#6b6659; }
.sl-ident-form{ display:flex; flex-direction:column; gap:14px; }
.sl-ident-form input{ padding:16px 16px; border:1px solid rgba(26,23,18,.22); border-radius:4px; background:#ffffff; font-family:'Encode Sans',sans-serif; font-size:16px; color:#1a1712; }
.sl-ident-form input:focus{ border-color:#c8a25b; outline:none; }
.sl-ident-form .sl-btn{ width:100%; padding:17px 26px; }
.sl-ident-mini{ margin:16px 0 0; font-size:15px; }
.sl-ident-mini a{ color:#6b6659; text-decoration:underline; text-underline-offset:3px; }
.sl-ident-mini a:hover{ color:#a5824a; opacity:1; }
.sl-ident-invitado{ margin:28px 0 0; padding-top:26px; border-top:1px solid rgba(26,23,18,.12); text-align:center; font-size:16px; }
.sl-ident-invitado a{ color:#1a1712; text-decoration:underline; text-underline-offset:4px; }
.sl-ident-invitado a:hover{ color:#a5824a; opacity:1; }
.sl-ident-nota{ margin:10px 0 0; text-align:center; font-size:14px; color:#8a8578; }
/* el aviso clasico de Woo trae su icono ::before, que se solapa con el texto;
   ademas Woo lo enfoca (role=alert tabindex=-1) y el navegador pinta un cerco */
.sl-ident-avisos ul.woocommerce-error{ list-style:none !important; margin:0 0 22px !important; padding:14px 16px !important; background:#f7f5f1 !important; border:none !important; border-left:2px solid #b36b5e !important; border-radius:0 !important; font-size:15px; color:#4a473f; outline:none !important; }
.sl-ident-avisos ul.woocommerce-error::before{ display:none !important; }
.sl-ident-avisos ul.woocommerce-error li{ list-style:none !important; margin:0 !important; padding:0 !important; }
/* franja de contexto del PASO 2 */
.sl-acceso-sesion{ margin:0 0 28px; padding:14px 18px; background:#f7f5f1; border-left:2px solid #c8a25b; font-size:15px; color:#4a473f; }
.sl-acceso-sesion strong{ font-weight:500; color:#1a1712; }
.sl-acceso-sesion a{ color:#1a1712; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:600px){
  .sl-ident{ padding:0 0 24px; }
  .sl-ident-caja h2{ font-size:25px !important; }
  .sl-ident-atras{ margin-bottom:24px; }
}

/* aviso de "ese correo ya tiene cuenta", junto a la casilla de crear cuenta */
.sl-cuenta-aviso{ margin:10px 0 18px; padding:12px 16px; background:#f7f5f1; border-left:2px solid #b36b5e; font-size:15px; line-height:1.55; color:#4a473f; }
.sl-cuenta-aviso[hidden]{ display:none; }
.sl-cuenta-aviso strong{ font-weight:500; color:#1a1712; }
.sl-cuenta-aviso a{ color:#1a1712; text-decoration:underline; text-underline-offset:3px; }
.sl-cuenta-aviso a:hover{ color:#a5824a; opacity:1; }
/* lo dice ya la franja de contexto de arriba: sin esto sale dos veces */
#wc-body .wc-block-checkout__guest-checkout-notice{ display:none; }


/* ==== AJUSTES RESPONSIVE (revisión 5-ago) ==== */

/* Titulares de los heros corporativos (Compromiso, Nosotros, Filosofía,
   Ingredientes, Consejos, Contacto). El diseño traía clamp(64px,9.5vw,148px):
   a 1900px son 148px y "SKINLOOR" invadía la insignia de Nosotros. Un paso
   menos y escala CONTINUA (42px móvil → 96px pantalla grande), que además
   sustituye los saltos fijos por breakpoint que traía cada página. */
#ab-hero h1, #cp-hero h1, #fl-hero h1, #ig-hero h1, #cs-hero h1, #ct-hero h1{
  font-size:clamp(42px, 5.5vw, 96px) !important;
}

/* Cabecera en tableta (721-1023): con el logo centrado, el lado de los iconos
   debe medir lo mismo que el menú de texto (~345px por flex:1 simétrico), así
   que la fila necesita ~990px reales: a 768 el logo salía cortado y los iconos
   fuera de pantalla. Solución del propio diseño (#pd-nav): ocultar el menú de
   texto y usar la hamburguesa, que wow.js construye a cualquier ancho. */
@media (min-width:721px) and (max-width:1023px){
  #sl-hero > div:nth-child(2) > div:first-child{ display:none !important; }
  #sl-mini > div > div:first-child{ display:none !important; }
  .sl-burger{ display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:32px; height:32px; background:none; border:none; padding:0; cursor:pointer; }
  .sl-burger span{ display:block; width:22px; height:1.5px; background:#1a1712; }
}

@media (max-width:1100px){
  /* Nosotros: la insignia pasa a static (regla del diseño) pero en el marcado
     va ANTES del texto, así que subía arriba y quedaba recortada por el
     overflow del hero. Como hija flex, detrás del texto y centrada. */
  /* relative, no static: la foto y el degradado del hero son absolutos y
     pintan ENCIMA de un hermano estatico (el degradado opaco al 40% izquierdo
     era lo que "cortaba" el grafico). En relative entra en la pila de
     apilamiento por orden de documento y queda encima, sin salir del flujo. */
  /* el 30vh encoge la insignia en pantallas BAJAS (portátiles 1024x800):
     con 280px fijos el hero no podía caber en el viewport */
  #ab-card{ position:relative !important; order:2; width:min(280px, 72vw, 30vh) !important; margin:36px auto 0 !important; }
  /* el diseño fijaba min-height:420px al bloque de texto (era para otra
     variante del hero): metía ~155px de aire fantasma bajo el titular */
  #ab-hero > div:last-child{ min-height:0 !important; }
  /* Filosofía: única cabecera de la familia sin atenuar la foto en pantallas
     estrechas; el texto caía encima de la caja oscura del producto. */
  #fl-hero > img, #fl-hero > picture > img{ opacity:.35; }
  /* Nosotros, "La historia": la columna de la polaroid es sticky (diseño de
     escritorio, foto acompañando al texto en 2 columnas). Al colapsar a UNA
     columna la foto se quedaba clavada arriba y el texto pasaba por debajo. */
  #ab-story > div:first-child{ position:static !important; }
  /* Compromiso, bloques 02 y 03: los pares de fotos conservaban el alto de
     escritorio (680px) al colapsar a una columna y quedaban como dos tiras
     verticales recortadas. Alto propio y proporción de tarjeta. */
  /* :not(.zoom): la regla debe tocar SOLO los contenedores de pares; con
     div:not([data-txt]) a secas ganaba por especificidad a la de la foto
     única del bloque 01 y la colapsaba a 0 */
  .cp-duo > div:not([data-txt]):not(.zoom){ min-height:0 !important; }
  .cp-duo > div:not([data-txt]) .zoom{ height:320px; }
  .cp-duo > div.zoom{ min-height:420px !important; } /* la foto única del bloque 01 */
}

/* Avisos + cabecera + hero = 100vh justos (petición 6-ago). La cabecera mide
   138px (45 de avisos + 93 de nav); el diseño traía heros de 78-88vh que,
   sumados a ella, pasaban de pantalla (+24 a +74px según ancho). */
@media (min-width:721px){
  /* techo de 620px: a pantalla completa (1920x1080 daba 942px de hero) ocupaba
     demasiado y empujaba el contenido; el min() mantiene la regla de que
     cabecera+hero nunca pasen de 100vh en pantallas bajas. */
  #ab-hero, #cp-hero, #fl-hero, #ig-hero, #cs-hero, #ct-hero{
    min-height:min(calc(100vh - 138px), 620px) !important;
    min-height:min(calc(100dvh - 138px), 620px) !important;
  }
  /* la insignia vuelve a un tamaño legible: con el hero acotado ya no hace
     falta encogerla en pantallas bajas */
  #ab-card{ width:clamp(220px, 24vw, 300px) !important; }
}
/* (Aquí vivía un recorte del relleno inferior SOLO para #ab-hero, resto del
   parche de pantallas bajas: dejaba el titular de Nosotros pegado al borde
   mientras sus cinco hermanas mantenían 64px. Con el hero acotado a 620px ya
   no hace falta y se ha retirado: las seis igualadas.) */

/* En móvil el problema era el contrario: un hero a pantalla completa con el
   centro vacío (foto lavada sin contenido encima). Compacto: el hero mide lo
   que mide su contenido y la página empieza antes. */
@media (max-width:720px){
  #ab-hero, #cp-hero, #fl-hero, #ig-hero, #cs-hero, #ct-hero{
    min-height:0 !important;
    justify-content:flex-start;
  }
  #ab-hero > div:last-child, #cp-hero > div:last-child, #fl-hero > div:last-child,
  #ig-hero > div:last-child, #cs-hero > div:last-child, #ct-hero > div:last-child{
    padding:36px 24px 44px !important;
  }
  /* Nosotros en móvil, igual que sus hermanas (decisión del usuario 6-ago):
     foto de fondo atenuada tras el titular y SIN insignia. El círculo solo
     vive de tableta en adelante. */
  #ab-card{ display:none !important; }

  /* Heros móvil (petición 6-ago): el fundido izquierdo venía CASI OPACO al 40%
     (pensado para escritorio, donde el texto vive en esa mitad) y, sumado a la
     foto al 30%, la imagen desaparecía. Velo suave, foto más presente y
     encuadre siempre hacia la derecha. */
  #ab-hero > div:nth-child(2), #cp-hero > div:nth-child(2), #fl-hero > div:nth-child(2),
  #ig-hero > div:nth-child(2), #cs-hero > div:nth-child(2), #ct-hero > div:nth-child(2){
    background:linear-gradient(90deg, rgba(250,250,250,.55) 0%, rgba(250,250,250,.22) 46%, rgba(250,250,250,0) 72%) !important;
  }
  #ab-hero > img, #cp-hero > img, #fl-hero > img,
  #ig-hero > img, #cs-hero > img, #ct-hero > img,
  #ab-hero > picture > img, #cp-hero > picture > img, #fl-hero > picture > img,
  #ig-hero > picture > img, #cs-hero > picture > img, #ct-hero > picture > img{
    opacity:.45 !important; object-position:right center !important;
  }

  /* Banners Compromiso/Filosofía/Ingredientes/Consejos: 2x2 en vez de
     apilados (decisión del usuario 6-ago). Venían con 560px de alto y
     rótulos de 30px pensados para columna entera. */
  #nos-tiles{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .nos-tile{ height:235px !important; }
  .nos-tile > span:nth-child(3){ top:12px !important; left:14px !important; font-size:13px !important; }
  .nos-tile > span:last-child{ bottom:14px !important; left:14px !important; right:14px !important; gap:8px !important; }
  .nos-tile > span:last-child > span:first-child{ font-size:15px !important; letter-spacing:.05em !important; }
  .nos-tile > span:last-child > span:last-child{ font-size:10px !important; letter-spacing:.14em !important; }

  /* Titular del bloque de Instagram: a 44px partía en cuatro líneas. Además
     compartía fila con "Ver perfil": la fila envuelve y el titular usa todo
     el ancho, con lo que queda en dos líneas. */
  #ab-igwrap h2{ font-size:25px !important; line-height:1.25 !important; }
  #ab-igwrap > div > div:first-child{ flex-wrap:wrap; gap:16px !important; }
  /* pares de fotos de Compromiso, un punto más compactos en móvil */
  .cp-duo > div:not([data-txt]) .zoom{ height:230px; }
  .cp-duo > div.zoom{ min-height:340px !important; }
}

/* ---- Revelado: exenciones para contenido que NO entra por scroll de página ----
   El IntersectionObserver de wow.js solo sabe de la ventana. Todo lo que aparece
   por otra vía (abrir un acordeón, desplazar una caja interna, rotar un carrusel,
   abrirse un clip-path) puede quedarse en opacity:0 PARA SIEMPRE, y el usuario ve
   huecos en blanco. Mismo patrón que el watermark del pie. */
details .sl-reveal{ opacity:1 !important; transform:none !important; }
/* caja de lectura del KB de la home: tiene su propio scroll interno */
.kb-content .sl-reveal, .kb-content .kb-section-title{ opacity:1 !important; transform:none !important; }
/* ofertas de la home: el panel se abre con clip-path y sus hijos nunca intersecan */
#sl-ofertas .sl-reveal{ opacity:1 !important; transform:none !important; }

/* Ingredientes/Consejos: páginas de 15-22 mil px — sin esto el navegador
   maqueta los 18 artículos de golpe (740ms de Style&Layout medidos). Con
   content-visibility solo maqueta lo que entra en pantalla. */
#ig-grid article, #cs-grid article{ content-visibility:auto; contain-intrinsic-size:auto 900px; }

/* "Lo más deseado" (Compromiso y Filosofía): el h2 de 58px empujaba el
   "Ver tienda" fuera de pantalla en estrecho. Escala y fila que envuelve. */
@media (max-width:1100px){
  #cp-trend h2{ font-size:40px !important; }
}
@media (max-width:720px){
  #cp-trend h2{ font-size:29px !important; }
  #cp-trend > div > div:first-child{ flex-wrap:wrap; gap:14px !important; padding-bottom:18px !important; }
}

/* Consejos: "Hiperpigmentación" (34px, palabra indivisible) forzaba el
   min-content del grid por encima del viewport — 1fr respeta el min-content,
   minmax(0,1fr) no. Solo ese artículo desbordaba: es la palabra más larga. */
@media (max-width:1200px){
  .cs-row > div:last-child{ grid-template-columns:minmax(0,1fr) !important; }
  .cs-row > div:last-child > div{ min-width:0; }
  .cs-row > div:last-child > div > div:first-child{ flex-wrap:wrap; }
}
@media (max-width:720px){
  .cs-row h2{ font-size:27px !important; }
}

/* ---- menú móvil: los hijos de los desplegables entran en el overlay ---- */
/* flex-start, no center: con 17 filas el contenido desborda y el centrado
   vertical de flex recorta el principio sin dejar hacer scroll hasta él */
.slm-nav{ overflow-y:auto; min-height:0; justify-content:flex-start; padding:16px 0; }
.slm-nav a.slm-sub{ padding:9px 2px 9px 38px; font-size:13px; letter-spacing:.16em; color:rgba(245,241,232,.72); border-bottom:none; }
.slm-nav a.slm-sub + a:not(.slm-sub){ margin-top:10px; border-top:1px solid rgba(245,241,232,.08); }
/* con 17 filas, los principales respiran menos que con 5 */
.slm-nav > a:not(.slm-sub){ padding:14px 2px; font-size:26px; }

/* Compromiso, bloque "Consejos": del par de fotos, en móvil queda solo la
   derecha a todo el ancho — la izquierda salía siempre cortada (petición
   6-ago). El par es el ÚLTIMO hijo solo en ese bloque (en el 03 va primero). */
@media (max-width:720px){
  .cp-duo > div:not([data-txt]):not(.zoom):last-child{ grid-template-columns:1fr !important; }
  .cp-duo > div:not([data-txt]):not(.zoom):last-child > .zoom:first-child{ display:none; }
}

/* Nosotros: el bloque de Instagram venía a 1240px y los banners de arriba a
   1400, así que la rejilla de fotos quedaba más estrecha y desalineada con
   ellos. Se iguala al de los banners (petición 7-ago). */
#ab-igwrap > div{ max-width:1400px !important; } /* el 1240 va en línea */

/* ---- toast "añadido a la cesta" (petición 6-ago; rediseñado 7-ago) ----
   Con el lenguaje de la casa: tarjeta blanca de esquinas rectas, hilo fino,
   la sombra de los desplegables del menú, rótulo ✦ dorado a .22em, marco
   #f2efe9 en la foto como en las tarjetas de producto, y "Ver cesta" con el
   subrayado dorado de .sl-underline. Antes era una caja oscura con borde
   izquierdo (invento) y 3px entre líneas. */
/* ⚠️ La tipografía se declara en #sl-stage y el toast cuelga del <body>, así
   que heredaba Times New Roman en todo salvo donde puse la familia a mano
   (mismo tropiezo que el mini-header clonado). Se fija en el contenedor. */
#sl-toasts{ position:fixed; top:96px; right:24px; z-index:12100; display:flex; flex-direction:column; gap:12px; pointer-events:none;
  font-family:'Encode Sans', sans-serif; }
.sl-toast{ display:flex; align-items:center; gap:18px; min-width:300px; max-width:min(380px, calc(100vw - 48px));
  font-family:inherit; background:#ffffff; color:#1a1712; padding:22px 26px;
  border:1px solid rgba(26,23,18,.1); box-shadow:0 26px 50px -20px rgba(26,23,18,.22);
  pointer-events:auto; cursor:pointer;
  opacity:0; transform:translateX(24px); transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.sl-toast.on{ opacity:1; transform:none; }
.sl-toast img{ flex:none; width:62px; height:62px; object-fit:cover; background:#f2efe9; }
.sl-toast-txt{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.sl-toast-tit{ display:inline-flex; align-items:center; font-size:11px; letter-spacing:.22em; text-transform:uppercase; line-height:1; color:#a5824a; }
.sl-toast-nombre{ font-weight:300; font-size:17px; line-height:1.35; color:#1a1712; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sl-toast-txt a{ align-self:flex-start; margin-top:2px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; line-height:1; color:#1a1712; border-bottom:1px solid #c8a25b; padding-bottom:5px; transition:color .3s ease; }
.sl-toast-txt a:hover{ color:#a5824a; opacity:1; }
@media (max-width:720px){
  #sl-toasts{ top:auto; bottom:18px; right:16px; left:16px; }
  .sl-toast{ max-width:none; min-width:0; padding:16px 18px; gap:14px; }
  .sl-toast img{ width:54px; height:54px; }
}

/* Atajo del hero de categoría/hub a la rejilla: con subcategorías y filtros
   por medio, llegar a los productos pedía mucho scroll (petición 6-ago).
   Va como pestaña vertical pegada al borde derecho, dentro del bloque de la
   foto, para no robarle sitio al texto y quedar igual en móvil, donde la
   imagen pasa arriba (petición 7-ago). */
.cat-hero-cta{
  position:absolute; z-index:3; right:0; top:50%; transform:translateY(-50%);
  display:inline-flex; flex-direction:column; align-items:center; gap:14px;
  padding:26px 14px; border-radius:16px 0 0 16px;
  background:#1a1712; color:#fff; text-decoration:none;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 18px 34px -14px rgba(26,23,18,.55);
  transition:padding-left .18s ease, background-color .18s ease;
}
.cat-hero-cta span{ writing-mode:vertical-rl; }
.cat-hero-cta i{ font-style:normal; font-size:15px; line-height:1; }
.cat-hero-cta:hover,
.cat-hero-cta:focus-visible{ background:#000; padding-left:20px; color:#fff; }
@media (max-width:720px){
  .cat-hero-cta{ padding:20px 11px; gap:11px; font-size:11px; letter-spacing:.18em; }
}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

/* ==== BLOG, BÚSQUEDA Y 404 ==== */

.bl-hero{ gap:16px; }
.bl-hero-intro{ margin:0; max-width:640px; font-size:18px; line-height:1.7; color:#4a473f; text-wrap:pretty; }

#bl-body{ background:#ffffff; padding:72px 72px 96px; display:flex; flex-direction:column; gap:40px; align-items:center; }
.bl-cats{ width:100%; max-width:1240px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; padding-bottom:24px; border-bottom:1px solid rgba(26,23,18,.12); }
.bl-cats a{ font-size:15px; color:#4a473f; transition:color .3s ease; }
.bl-cats a:hover{ color:#a5824a; opacity:1; }
.bl-cats a span{ font-size:12px; color:#a09b8f; }

.bl-grid{ width:100%; max-width:1240px; display:grid; grid-template-columns:repeat(3,1fr); gap:48px 30px; }
.bl-card{ display:flex; flex-direction:column; gap:18px; }
.bl-card-img{ display:block; aspect-ratio:4/3; overflow:hidden; background:#f2efe9; }
.bl-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.bl-card:hover .bl-card-img img{ transform:scale(1.05); }
.bl-card-nofoto{ display:block; width:100%; height:100%; background:linear-gradient(135deg,#f2efe9,#eae6df); }
.bl-card-txt{ display:flex; flex-direction:column; gap:10px; }
.bl-card-cat{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#a5824a; }
.bl-card-tit{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:23px; line-height:1.25; letter-spacing:.01em !important; text-transform:none !important; color:#1a1712; }
.bl-card-tit a{ transition:color .3s ease; }
.bl-card:hover .bl-card-tit a{ color:#a5824a; opacity:1; }
.bl-card-exc{ margin:0; font-size:16px; line-height:1.7; color:#6b6659; text-wrap:pretty; }
.bl-card-fecha{ font-size:13px; color:#a09b8f; }
.bl-pag{ margin-top:8px; }
.bl-vacio{ margin:0; font-size:18px; color:#6b6659; }

/* ---- entrada ---- */
.bl-hero--post h1{ max-width:900px; font-size:46px !important; line-height:1.1; text-transform:none !important; letter-spacing:.01em !important; }
.bl-post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:14px; color:#8a8578; }
.bl-post-meta a{ color:#a5824a; }
.bl-post-foto{ margin:0; padding:0 72px; background:#ffffff; }
.bl-post-foto img{ display:block; width:100%; max-width:1240px; margin:44px auto 0; height:auto; }
.bl-post-body{ max-width:760px; margin:0 auto; padding:56px 24px 24px; }
.bl-post-body h2{ margin:44px 0 16px; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:30px; line-height:1.25; letter-spacing:.01em !important; text-transform:none !important; color:#1a1712; }
.bl-post-body h3{ margin:34px 0 12px; font-family:'Encode Sans',sans-serif; font-weight:400; font-size:22px; letter-spacing:.02em !important; text-transform:none !important; color:#1a1712; }
.bl-post-body h4{ margin:28px 0 10px; font-weight:500; font-size:18px; text-transform:none !important; letter-spacing:.02em !important; }
.bl-post-body p{ margin:0 0 20px; font-size:18px; line-height:1.85; color:#4a473f; text-wrap:pretty; }
.bl-post-body ul, .bl-post-body ol{ margin:0 0 24px; padding-left:24px; }
.bl-post-body li{ margin-bottom:10px; font-size:18px; line-height:1.8; color:#4a473f; }
.bl-post-body li::marker{ color:#c8a25b; }
.bl-post-body a{ color:#a5824a; border-bottom:1px solid rgba(165,130,74,.45); }
.bl-post-body strong{ font-weight:500; color:#1a1712; }
.bl-post-body figure{ margin:34px 0; }
.bl-post-body img{ max-width:100%; height:auto; display:block; }
.bl-post-body figcaption{ margin-top:10px; font-size:14px; color:#8a8578; }
.bl-post-body blockquote{ margin:34px 0; padding:4px 0 4px 26px; border-left:2px solid #c8a25b; }
.bl-post-body blockquote p{ font-size:21px; font-weight:300; line-height:1.6; color:#1a1712; }
.bl-post-pie{ max-width:760px; margin:0 auto; padding:32px 24px 0; border-top:1px solid rgba(26,23,18,.12); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }

#bl-otras{ background:#ffffff; border-top:1px solid rgba(26,23,18,.08); padding:88px 72px 96px; display:flex; flex-direction:column; gap:34px; align-items:center; }
.bl-otras-head{ width:100%; max-width:1240px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
#bl-otras #cat-grid{ width:100%; max-width:1240px; }

/* ---- 404 ---- */
#e404{ background:#f7f5f1; padding:96px 72px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
.e404-num{ font-family:'Poppins',sans-serif; font-weight:500; font-size:96px; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(200,162,91,.7); }
#e404 h1{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:200; font-size:52px; line-height:1.05; }
#e404 > p{ margin:0; max-width:520px; font-size:18px; line-height:1.7; color:#4a473f; }
.e404-btns{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 28px; margin-top:8px; }
.e404-links{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 24px; margin-top:24px; padding-top:24px; border-top:1px solid rgba(26,23,18,.12); }
.e404-links a{ font-size:16px; color:#4a473f; transition:color .3s ease; }
.e404-links a:hover{ color:#a5824a; opacity:1; }

@media (max-width:1100px){
  #bl-body{ padding:56px 40px 80px; }
  .bl-grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; }
  .bl-post-foto{ padding:0 40px; }
  #bl-otras{ padding:64px 40px 80px; }
  #e404{ padding:72px 40px; }
}
@media (max-width:720px){
  #bl-body{ padding:40px 24px 64px; gap:28px; }
  .bl-grid{ grid-template-columns:1fr; gap:36px; }
  .bl-card-tit{ font-size:21px; }
  .bl-hero--post h1{ font-size:30px !important; }
  .bl-post-foto{ padding:0 24px; }
  .bl-post-foto img{ margin-top:28px; }
  .bl-post-body{ padding:36px 24px 16px; }
  .bl-post-body p, .bl-post-body li{ font-size:17px; }
  .bl-post-body h2{ font-size:25px; }
  .bl-post-pie{ padding:24px 24px 0; }
  #bl-otras{ padding:48px 24px 64px; }
  .bl-otras-head{ flex-wrap:wrap; gap:12px; }
  #e404{ padding:56px 24px; }
  #e404 h1{ font-size:34px; }
  .e404-num{ font-size:68px; }
}

/* Volver a la categoría desde la ficha: las migas solas se pasaban por alto
   y desde el producto no había salida clara hacia arriba (petición 7-ago). */
.pd-back{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#1a1712; text-decoration:none;
  border-bottom:1px solid #c8a25b; padding-bottom:4px;
  transition:color .18s ease, gap .18s ease;
}
.pd-back:hover,
.pd-back:focus-visible{ color:#c8a25b; gap:13px; }

/* Sin filtros no hay columna izquierda: la rejilla ocupa el ancho completo.
   #cat-body es grid 264px/1fr, así que al quitar el aside la parrilla caería
   dentro de los 264px si no se colapsa la primera pista (petición 7-ago). */
#cat-body.cat-body--full{ grid-template-columns:1fr; }

/* Barra de migas + "volver", a todo el ancho entre cabecera y galería. Antes
   vivían dentro de la columna de compra, a media página y fuera de la vista
   al entrar en la ficha (petición 7-ago). */
#pd-crumbs{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px 32px;
  padding:24px 72px 0; background:#ffffff;
}
#pd-crumbs .sl-crumbs{ min-width:0; }
#pd-main{ padding-top:30px; }
@media (max-width:1023px){ #pd-crumbs{ padding:20px 40px 0; } }
@media (max-width:720px){
  #pd-crumbs{ padding:16px 24px 0; gap:10px 18px; }
  /* en móvil el volver manda más que la miga completa: primero y a la izquierda */
  #pd-crumbs .pd-back{ order:-1; }
}

/* Franja de servicios de la ficha: iba a 13px bajo una descripción de 16 y se
   leía como nota al pie (petición 7-ago). A 15px, el mismo tamaño que la misma
   franja en las cabeceras de categoría. */
/* Con las frases acortadas (petición 7-ago) las cuatro vuelven a caber en una
   fila a 15px. Se mantiene flex con space-between, como estaba. */
#pd-serv{ padding-top:24px; padding-bottom:24px; }
#pd-serv > div > span{ font-size:15px; gap:11px; }
@media (max-width:720px){
  #pd-serv{ padding-top:20px; padding-bottom:20px; }
  #pd-serv > div > span{ font-size:14px; }
}
/* Entre 721 y 1099 caben tres y la cuarta se descuelga sola (3+1). Rejilla de
   dos columnas para que quede 2+2, que se lee como decisión. */
@media (min-width:721px) and (max-width:1099px){
  #pd-serv > div{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 40px; }
}

/* ==== PAGINA "LA MARCA" (parts/pages/la-marca.php) ==== */

/* Dato pendiente de la clienta. Se ve, pero sin romper la lectura: cuando llegue
   el dato real se sustituye la llamada a skinloor_falta() por el texto. */
.mk-falta{
  display:inline; padding:1px 7px; border:1px dashed rgba(165,130,74,.55);
  border-radius:3px; background:rgba(200,162,91,.09);
  color:#a5824a; font-style:italic; font-size:.94em; text-wrap:pretty;
}
#mk-metodo .mk-falta{ border-color:rgba(200,162,91,.5); background:rgba(200,162,91,.12); color:#c8a25b; }

/* Cifras */
.mk-cifra{ display:flex; flex-direction:column; gap:8px; padding:26px 28px 0 0; border-right:1px solid rgba(26,23,18,.12); }
#mk-cifras .mk-cifra:last-child{ border-right:0; }
#mk-cifras .mk-cifra + .mk-cifra{ padding-left:28px; }
.mk-cifra-n{ font-family:'Encode Sans',sans-serif; font-weight:200; font-size:44px; line-height:1; letter-spacing:-.02em; color:#1a1712; }
.mk-cifra-t{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#8a8578; }

/* Areas del equipo */
.mk-area{ display:flex; flex-direction:column; gap:12px; padding:34px 32px 38px; background:#faf9f7; }
.mk-area-n{ font-family:'Encode Sans',sans-serif; font-weight:300; font-size:16px; color:#a5824a; }
.mk-area-t{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:400; font-size:23px; line-height:1.2; letter-spacing:-.01em; color:#1a1712; text-transform:none; }
.mk-area-l{ display:block; width:38px; height:1px; background:#c8a25b; }
.mk-area-p{ margin:0; font-size:16px; line-height:1.75; color:#4a473f; text-wrap:pretty; }
.mk-area--foto{ position:relative; padding:0; overflow:hidden; background:#eae6df; min-height:240px; }
.mk-area--foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mk-area-cta{ position:absolute; left:28px; bottom:26px; display:inline-flex; align-items:center; gap:8px; padding:11px 20px; background:rgba(255,255,255,.94); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#1a1712; }

/* Metodo */
.mk-metodo-head{ display:grid; grid-template-columns:1fr 420px; gap:72px; align-items:end; }
.mk-metodo-intro{ margin:0; font-size:18px; line-height:1.8; color:rgba(245,241,232,.7); text-wrap:pretty; }
/* los cuatro pasos, en fila: el borde superior de cada uno encadena una sola
   línea y el punto dorado marca dónde empieza cada paso */
#mk-pasos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.mk-paso{ position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 34px 0 0; border-top:1px solid rgba(245,241,232,.22); }
.mk-paso + .mk-paso{ padding-left:34px; }
.mk-paso::before{ content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:#c8a25b; }
/* el punto debe caer sobre el número, no sobre el hueco entre columnas */
.mk-paso + .mk-paso::before{ left:34px; }
.mk-paso-n{ font-family:'Encode Sans',sans-serif; font-weight:200; font-size:38px; line-height:1; letter-spacing:-.01em; color:#c8a25b; }
.mk-paso-t{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:400; font-size:23px; line-height:1.2; color:#f5f1e8; text-transform:none; letter-spacing:-.01em; }
.mk-paso-p{ margin:0; font-size:16px; line-height:1.75; color:rgba(245,241,232,.75); text-wrap:pretty; }

/* Produccion */
.mk-prod-fotos{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.mk-prod-fotos img{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; display:block; }

/* Valores */
/* Principios: filas con el rótulo a la izquierda (maqueta original). */
.mk-valor{ display:grid; grid-template-columns:380px 1fr; gap:48px; padding:28px 0; border-bottom:1px solid rgba(26,23,18,.12); align-items:start; }
.mk-valor-t{ margin:0; font-family:'Encode Sans',sans-serif; font-weight:300; font-size:28px; line-height:1.2; letter-spacing:-.01em; color:#1a1712; text-transform:none; display:flex; align-items:center; gap:12px; }
.mk-valor-p{ margin:0; font-size:18px; line-height:1.8; color:#4a473f; text-wrap:pretty; max-width:820px; }

@media (max-width:1099px){
  #mk-intro, #mk-origen, #mk-equipo, #mk-metodo, #mk-produccion, #mk-valores{ padding-left:40px; padding-right:40px; }
  .mk-intro-grid, .mk-origen-grid, .mk-equipo-head, .mk-metodo-head, .mk-prod-grid{ grid-template-columns:minmax(0,1fr) !important; gap:40px !important; align-items:start !important; }
  .mk-origen-grid > div:first-child{ position:static; max-width:340px; }
  #mk-areas{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  #mk-pasos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mk-paso:nth-child(2n+1){ padding-left:0; }
  .mk-paso:nth-child(n+3){ margin-top:26px; }
  .mk-valor{ grid-template-columns:minmax(0,1fr); gap:10px; }
}

@media (max-width:720px){
  #mk-intro, #mk-origen, #mk-equipo, #mk-metodo, #mk-produccion, #mk-valores{ padding:64px 20px !important; }
  #mk-intro h2, #mk-origen h2, #mk-equipo h2, #mk-metodo h2, #mk-produccion h2, #mk-valores h2{ font-size:29px !important; }
  #mk-intro p{ font-size:17px !important; }
  #mk-origen p, .mk-valor-p{ font-size:16px !important; line-height:1.75 !important; }
  #mk-cifras{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  .mk-cifra{ padding:20px 16px 20px 0 !important; }
  #mk-cifras .mk-cifra + .mk-cifra{ padding-left:0; }
  #mk-cifras .mk-cifra:nth-child(2n){ border-right:0; padding-left:16px !important; }
  #mk-cifras .mk-cifra:nth-child(n+3){ border-top:1px solid rgba(26,23,18,.12); }
  .mk-cifra-n{ font-size:30px; }
  .mk-cifra-t{ font-size:11px; letter-spacing:.12em; }
  #mk-areas{ grid-template-columns:minmax(0,1fr) !important; }
  .mk-area{ padding:26px 22px 30px; }
  .mk-area--foto{ min-height:220px; }
  #mk-pasos{ grid-template-columns:minmax(0,1fr); }
  .mk-paso, .mk-paso + .mk-paso{ padding:22px 0 0 !important; }
  .mk-paso:nth-child(n+2){ margin-top:20px; }
  .mk-paso-t{ font-size:20px; }
  .mk-paso-p{ font-size:16px; }

  #ab-split p:first-of-type{ font-size:28px !important; }
  .mk-valor-t{ font-size:22px; }
  .mk-valor-t{ font-size:21px; }
}

/* "El origen": el texto arrancaba a la altura del rótulo y la polaroid quedaba
   descolgada 150px por debajo. En escritorio se centra con la foto. */
@media (min-width:1100px){
  .mk-origen-grid{ align-items:center !important; }
}

/* Icono de cada principio, a la izquierda del rótulo */

.mk-valor-i{ flex:0 0 auto; display:block; }
@media (max-width:720px){ .mk-valor-i{ width:22px; height:22px; } .mk-valor-t{ gap:10px; } }



/* La insignia del hero encogió a 300px (regla de 7-ago) pero su relleno es un
   porcentaje del ANCHO DEL HERO (5%/4% de 1440 = 72/57px), no del círculo: la
   imagen quedaba en 177px dentro de 300. Relleno fuera y tamaño por la imagen. */
#ab-card{ padding:0 !important; }
#ab-card > img, #ab-card > picture > img{ width:76% !important; height:auto; }
#ab-card > picture{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }



/* Banda a sangre con parallax entre los principios y el método. El fondo fijo
   es la vía sin JS; en móvil e iOS no funciona (y consume), así que allí se
   comporta como una foto normal, y se desactiva con prefers-reduced-motion. */
#mk-banda{ height:clamp(260px, 38vh, 460px); background-size:cover; background-position:center; background-repeat:no-repeat; }
@media (min-width:721px) and (prefers-reduced-motion:no-preference){
  #mk-banda{ background-attachment:fixed; }
}

/* Escríbenos: el encuadre por defecto (centro) cortaba los dos frascos por
   abajo; la ventana baja en la foto y la imagen sube. */
.mk-area--foto img{ object-position:center 60%; }

/* Avisos clásicos de Woo en carrito/pago (producción usa el carrito clásico): sin el icono ::before
   de woocommerce-general, que se montaba sobre el texto, ni su filete superior de color */
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info{ border-top:0 !important; padding:14px 20px !important; }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-message::before, .woocommerce-notices-wrapper .woocommerce-info::before{ display:none !important; }

/* ==== Carrito y pago CLASICOS (shortcode; produccion no usa los bloques) 23-sep-2026 ==== */
.wc-body-in .woocommerce table.shop_table td.product-thumbnail{ width:112px; }
.wc-body-in .woocommerce table.shop_table td.product-thumbnail img,
.wc-body-in .woocommerce table.shop_table td.product-thumbnail picture img{ width:84px !important; max-width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; background:#f2efe9; display:block; }
.wc-body-in .woocommerce table.shop_table td.product-name a{ color:#1a1712; text-decoration:none; font-size:17px; }
.wc-body-in .woocommerce table.shop_table td.product-remove a.remove{ color:#b36b5e !important; font-size:20px; font-weight:400; }
.wc-body-in .woocommerce table.shop_table td.product-remove a.remove:hover{ background:transparent !important; color:#1a1712 !important; }
.wc-body-in .woocommerce table.shop_table td.actions{ padding:18px 16px; }
.wc-body-in .woocommerce table.shop_table td.actions .coupon{ display:flex; gap:12px; align-items:stretch; float:none; max-width:460px; }
.wc-body-in .woocommerce table.shop_table td.actions .coupon .input-text,
.wc-body-in .woocommerce #coupon_code{ width:auto !important; flex:1 1 220px; min-width:0; padding:14px 16px !important; border:1px solid rgba(26,23,18,.18); border-radius:0; font-size:15px; font-family:inherit; background:#fff; }
.wc-body-in .woocommerce table.shop_table td.actions .coupon .button{ white-space:nowrap; }
.wc-body-in .woocommerce table.shop_table td.actions > .button{ float:right; }
.wc-body-in .woocommerce .quantity .qty{ width:72px; padding:12px 8px; border:1px solid rgba(26,23,18,.18); border-radius:0; font-family:inherit; font-size:15px; text-align:center; }
.wc-body-in .woocommerce .cart-collaterals .cart_totals h2{ font-family:'Encode Sans',sans-serif; font-weight:300; font-size:30px; letter-spacing:0; text-transform:none; margin:0 0 14px; }
.wc-body-in .woocommerce .cart-collaterals .cart_totals table.shop_table th{ width:40%; }
.wc-body-in .woocommerce .wc-proceed-to-checkout a.checkout-button{ display:block; text-align:center; font-size:14px; letter-spacing:.18em; text-transform:uppercase; padding:18px 24px; }
.wc-body-in .woocommerce .return-to-shop a.button{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; }
@media (max-width:768px){
  .wc-body-in .woocommerce table.shop_table_responsive tr td.product-thumbnail{ text-align:left !important; }
  .wc-body-in .woocommerce table.shop_table_responsive tr td.product-thumbnail::before{ display:none; }
  .wc-body-in .woocommerce table.shop_table td.actions .coupon{ max-width:none; flex-wrap:wrap; }
  .wc-body-in .woocommerce table.shop_table td.actions .coupon .input-text{ flex:1 1 100%; }
  .wc-body-in .woocommerce table.shop_table td.actions .coupon .button{ width:100%; }
}

/* pago clásico: caja de métodos de pago en la paleta del tema (Woo la pinta lila) */
.wc-body-in .woocommerce-checkout #payment{ background:#f7f5f1 !important; border-radius:0 !important; border:1px solid rgba(26,23,18,.1); }
.wc-body-in .woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid rgba(26,23,18,.1) !important; padding:20px 24px !important; }
.wc-body-in .woocommerce-checkout #payment div.payment_box{ background:#ffffff !important; color:#4a473f !important; border:1px solid rgba(26,23,18,.1); border-radius:0 !important; }
.wc-body-in .woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:#ffffff !important; }
.wc-body-in .woocommerce-checkout #payment div.form-row.place-order{ padding:20px 24px !important; }
.wc-body-in .woocommerce-checkout #payment .wc_payment_method label{ font-size:15px; color:#1a1712; }
.wc-body-in .woocommerce-checkout #place_order{ float:right; font-size:13px; letter-spacing:.18em; text-transform:uppercase; padding:16px 28px; }
.wc-body-in .woocommerce-checkout h3, .wc-body-in .woocommerce-checkout #order_review_heading{ font-family:'Encode Sans',sans-serif; font-weight:300; font-size:26px; letter-spacing:0; text-transform:none; margin:26px 0 12px; }
.wc-body-in .woocommerce-checkout .form-row input.input-text, .wc-body-in .woocommerce-checkout .form-row textarea, .wc-body-in .woocommerce-checkout .select2-container--default .select2-selection--single{ border:1px solid rgba(26,23,18,.18); border-radius:0; padding:12px 14px; font-family:inherit; font-size:15px; height:auto; }
.wc-body-in .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:1.4; padding-left:0; }
.wc-body-in .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; }
.wc-body-in .woocommerce-checkout .form-row label{ font-size:14px; color:#6b675e; }
.wc-body-in .woocommerce-checkout .form-row .required{ color:#b36b5e; }

/* pago de bloques: el enlace "Acceso" junto a Información de contacto sobra (el paso 1 ya ofrece iniciar sesión) */
.wc-body-in .wc-block-checkout__login-prompt{ display:none !important; }

/* H1 de la home = rótulo pequeño del hero ("Cosmética facial"): nunca hereda los tamaños de titular */
#sl-stage h1.hkick{ font-size:13px !important; letter-spacing:.44em !important; line-height:inherit !important; }

/* ==== Mi cuenta: pestañas con sesión iniciada (23-sep-2026) ==== */
body.woocommerce-account .woocommerce-MyAccount-content{ font-size:16px; line-height:1.7; color:#4a473f; }
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type{ margin-top:0; }
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button){ color:#1a1712; text-decoration:underline; text-decoration-color:#c8a25b; text-underline-offset:3px; }
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover{ color:#a5824a; }
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3{ font-family:'Encode Sans',sans-serif; font-weight:300; font-size:26px; line-height:1.2; letter-spacing:0; text-transform:none; color:#1a1712; margin:0 0 18px; }
body.woocommerce-account .woocommerce-MyAccount-content mark{ background:none; color:#1a1712; font-weight:500; }

/* Direcciones: dos tarjetas iguales, título arriba, dirección y enlace de edición abajo */
body.woocommerce-account .woocommerce-Addresses{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; margin-top:24px; }
body.woocommerce-account .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-Addresses::after{ display:none !important; content:none !important; }
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address{ float:none !important; width:auto !important; margin:0 !important; background:#f7f5f1; border:1px solid rgba(26,23,18,.08); padding:28px 30px 26px; display:flex; flex-direction:column; }
/* la cabecera (título + editar) se "deshace" para que el enlace de editar quede al pie de la tarjeta, bajo la dirección */
body.woocommerce-account .woocommerce-Address-title{ display:contents; }
body.woocommerce-account .woocommerce-Address-title::before, body.woocommerce-account .woocommerce-Address-title::after{ display:none !important; content:none !important; }
body.woocommerce-account .woocommerce-Address-title h2{ order:1; float:none !important; font-size:22px !important; margin:0 0 14px !important; }
body.woocommerce-account .woocommerce-Address address{ order:2; font-style:normal; line-height:1.75; color:#4a473f; margin:0 0 22px; flex:1; }
body.woocommerce-account .woocommerce-Address-title a.edit{ order:3; align-self:flex-start; float:none !important; font-size:12px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none !important; border-bottom:1px solid #c8a25b; padding-bottom:3px; color:#1a1712; }

/* Detalle de un pedido: direcciones del cliente como tarjetas */
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns::before, body.woocommerce-account .woocommerce-customer-details .woocommerce-columns::after{ display:none !important; content:none !important; }
body.woocommerce-account .woocommerce-customer-details .woocommerce-column{ float:none !important; width:auto !important; background:#f7f5f1; border:1px solid rgba(26,23,18,.08); padding:28px 30px; }
body.woocommerce-account .woocommerce-customer-details .woocommerce-column__title{ font-size:22px !important; }
body.woocommerce-account .woocommerce-customer-details address{ font-style:normal; border:0 !important; padding:0 !important; line-height:1.75; }
body.woocommerce-account .woocommerce-customer-details address p{ margin:10px 0 0; }
body.woocommerce-account .woocommerce-order-details{ margin:28px 0 36px; }

/* Pedidos: número enlazado y estado como etiqueta */
body.woocommerce-account .woocommerce-orders-table__cell-order-number a{ font-weight:500; }
body.woocommerce-account .woocommerce-orders-table__cell-order-status{ font-size:13px; letter-spacing:.06em; }
body.woocommerce-account .woocommerce-orders-table td, body.woocommerce-account .woocommerce-orders-table th{ vertical-align:middle; }
body.woocommerce-account .woocommerce-orders-table .button{ padding:10px 22px; font-size:12px; }

/* Detalles de la cuenta: bloque de contraseña sin marco del navegador */
body.woocommerce-account .woocommerce-EditAccountForm fieldset{ border:0; border-top:1px solid rgba(26,23,18,.12); margin:34px 0 8px; padding:26px 0 0; }
body.woocommerce-account .woocommerce-EditAccountForm legend{ font-family:'Encode Sans',sans-serif; font-weight:300; font-size:22px; color:#1a1712; padding:0 14px 0 0; }
body.woocommerce-account .woocommerce-EditAccountForm #account_display_name_field + span em,
body.woocommerce-account .woocommerce-EditAccountForm > span em{ font-style:normal; font-size:13px; color:#8a8578; display:block; margin:-6px 0 14px; }
body.woocommerce-account .woocommerce-MyAccount-content form .button{ margin-top:14px; }
body.woocommerce-account .woocommerce-MyAccount-content .form-row-first, body.woocommerce-account .woocommerce-MyAccount-content .form-row-last{ width:calc(50% - 12px); }
body.woocommerce-account .woocommerce-MyAccount-content .form-row .optional{ color:#a39e92; font-size:13px; }

@media (max-width:760px){
  body.woocommerce-account .woocommerce-Addresses, body.woocommerce-account .woocommerce-customer-details .woocommerce-columns{ grid-template-columns:1fr; }
  body.woocommerce-account .woocommerce-MyAccount-content .form-row-first, body.woocommerce-account .woocommerce-MyAccount-content .form-row-last{ width:100%; float:none; }
  body.woocommerce-account .woocommerce-MyAccount-content h2{ font-size:22px; }
  body.woocommerce-account .woocommerce-Address-title a.edit{ letter-spacing:.1em; white-space:normal; }
  body.woocommerce-account .woocommerce-Addresses .woocommerce-Address{ padding:24px 22px; }
  /* WooCommerce oculta en móvil la celda del nº de pedido (es un th): se muestra como cabecera de cada pedido */
  body.woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number{ display:block !important; text-align:left; padding:16px 16px 6px; border-top:1px solid rgba(26,23,18,.14); font-size:17px; }
  body.woocommerce-account .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number::before{ content:'Pedido '; font-weight:400; color:#8a8578; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
}
/* avisos de Mi cuenta: WooCommerce pone el botón antes del texto; se muestra detrás (debajo si no cabe en la línea) */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button{ order:2; margin-left:0 !important; float:none !important; }