.elementor-4086 .elementor-element.elementor-element-e46b46f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c7572c5 *//* =========================================================
   BARBER SUPPLY — Página de cierre temporal
   Pegar en: Apariencia → Personalizar → CSS adicional
   (o en Elementor → Ajustes del sitio → CSS personalizado)
   Hecho por FACELAD
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=Inter:wght@400;500;600&display=swap');

/* Fondo negro en toda la página, para que no aparezcan bordes blancos del tema */
html, body { background: #0e0e0e !important; margin: 0; padding: 0; }

/* Quita márgenes que Elementor agrega alrededor del widget HTML */
.elementor-widget-html:has(.bsx),
.elementor-widget-html:has(.bsx) > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
.e-con:has(> .elementor-widget-html .bsx),
.elementor-section:has(.bsx) .elementor-container,
.elementor-section:has(.bsx) .elementor-column > .elementor-widget-wrap { padding: 0 !important; max-width: 100% !important; }

.bsx{
  /* ====== COLORES ====== */
  --bg:#0e0e0e; --bg-2:#171717; --line:#2a2a2a;
  --text:#f2efe9; --muted:#a8a29a; --accent:#c8a165; --wa:#25d366;
  /* ====== MÁRGENES (se adaptan al ancho de pantalla) ====== */
  --gutter:clamp(18px,5vw,48px);
  --max:1040px;
  --section:clamp(44px,8vw,80px);

  background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  width:100%;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  overflow-x:hidden;text-align:left;
}
.bsx *,.bsx *::before,.bsx *::after{box-sizing:border-box;margin:0;padding:0}
.bsx a{color:inherit;text-decoration:none;box-shadow:none}
.bsx h1,.bsx h2,.bsx h3,.bsx p{overflow-wrap:break-word;color:inherit;text-transform:none;letter-spacing:normal;border:0}

.bsx .wrap{
  width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}

.bsx .pole{height:6px;background:repeating-linear-gradient(135deg,var(--accent) 0 14px,var(--bg) 14px 28px)}

/* Logo */
.bsx header{padding-top:clamp(20px,4vw,32px)}
.bsx .logo{display:inline-block;line-height:0}
.bsx .logo img{display:block;height:clamp(44px,7vw,64px);width:auto;max-width:70vw;object-fit:contain}
/* Si el logo es oscuro y no se ve sobre el fondo negro, quita el comentario de la línea siguiente: */
/* .bsx .logo img{filter:brightness(0) invert(1)} */

.bsx main{flex:1}
.bsx .hero{padding-top:clamp(44px,9vw,88px);padding-bottom:var(--section)}
.bsx .tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--muted);margin-bottom:clamp(20px,4vw,28px)}
.bsx .tag i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:block}
.bsx h1{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;font-size:clamp(42px,11vw,92px);line-height:1;letter-spacing:.01em;margin-bottom:clamp(18px,3vw,26px)}
.bsx h1 em{font-style:normal;color:var(--accent)}
.bsx .lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:620px;margin-bottom:clamp(28px,5vw,40px)}
.bsx .lead strong{color:var(--text);font-weight:500}

.bsx .btns{display:flex;flex-wrap:wrap;gap:12px}
.bsx .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:10px;font-weight:600;font-size:16px;line-height:1.2;min-height:52px;transition:transform .15s}
.bsx .btn:hover{transform:translateY(-2px)}
.bsx .btn-wa,.bsx .btn-wa:hover,.bsx .btn-wa:visited{background:var(--wa);color:#08260f}
.bsx .btn-ghost,.bsx .btn-ghost:hover,.bsx .btn-ghost:visited{border:1px solid var(--line);color:var(--text)}
.bsx .btn svg{width:20px;height:20px;flex:none}

.bsx section{padding:var(--section) 0;border-top:1px solid var(--line)}
.bsx h2{font-family:Oswald,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(22px,4vw,30px);line-height:1.2;margin-bottom:12px}
.bsx .sub{color:var(--muted);max-width:620px;margin-bottom:clamp(22px,4vw,30px)}

.bsx .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(12px,2vw,16px)}
.bsx .card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,26px);display:flex;flex-direction:column;transition:border-color .15s;color:var(--text)}
.bsx a.card:hover{border-color:var(--accent);color:var(--text)}
.bsx .card h3{font-family:Inter,system-ui,sans-serif;font-size:17px;font-weight:600;line-height:1.3;margin-bottom:6px}
.bsx .card p{color:var(--muted);font-size:15px}
.bsx .card .go{color:var(--accent);font-size:14px;font-weight:600;margin-top:auto;padding-top:14px}

.bsx .thanks{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;padding:clamp(22px,4vw,32px)}
.bsx .thanks p{color:var(--muted);font-size:clamp(16px,2vw,18px)}
.bsx .thanks p + p{margin-top:10px}

.bsx footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px;padding:clamp(28px,5vw,40px) 0 max(clamp(28px,5vw,40px),env(safe-area-inset-bottom))}
.bsx footer .row{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center}
.bsx footer a:hover{color:var(--accent)}
.bsx .social{display:flex;flex-wrap:wrap;gap:18px}
.bsx .credit{width:100%;padding-top:16px;margin-top:4px;border-top:1px solid var(--line);font-size:13px;opacity:.85}
.bsx .credit a{color:var(--text);font-weight:600;letter-spacing:.04em}

@media (max-width:560px){
  .bsx .btns{flex-direction:column}
  .bsx .btn{width:100%}
  .bsx footer .row{flex-direction:column;align-items:flex-start}
}/* End custom CSS */