/*
Theme Name: Fundas Star
Author: Fundas Star
Description: Tema WooCommerce para una tienda de fundas de movil.
Version: 1.0.0
Text Domain: fundas-star
*/

:root {
  --fs-bg: #070816;
  --fs-surface: #11132a;
  --fs-surface-2: #171a36;
  --fs-text: #f7f7ff;
  --fs-muted: #b8bbd7;
  --fs-primary: #8b5cf6;
  --fs-primary-2: #c084fc;
  --fs-accent: #22d3ee;
  --fs-border: rgba(255,255,255,.10);
  --fs-shadow: 0 18px 60px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top right, rgba(139,92,246,.22), transparent 28%), var(--fs-bg);
  color: var(--fs-text);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(7,8,22,.78);
  border-bottom: 1px solid var(--fs-border);
}
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .04em; }
.brand-star { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg,var(--fs-primary),var(--fs-accent)); box-shadow: 0 8px 30px rgba(139,92,246,.35); }
.site-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-nav a { color: var(--fs-muted); font-weight: 650; }
.site-nav a:hover { color: #fff; }
.cart-link { padding: 10px 14px; border: 1px solid var(--fs-border); border-radius: 999px; background: rgba(255,255,255,.05); }

.hero { padding: 82px 0 54px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; }
.eyebrow { display: inline-flex; gap: 8px; padding: 7px 12px; border: 1px solid rgba(192,132,252,.28); color: #e9d5ff; background: rgba(139,92,246,.12); border-radius: 999px; font-size: .9rem; font-weight: 800; }
h1 { font-size: clamp(2.7rem, 7vw, 5.8rem); line-height: .95; margin: 20px 0; letter-spacing: -.055em; }
.hero p { color: var(--fs-muted); font-size: 1.14rem; max-width: 680px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px !important; border-radius: 14px !important;
  border: 1px solid transparent !important; font-weight: 800 !important;
  background: linear-gradient(135deg,var(--fs-primary),var(--fs-primary-2)) !important; color: #fff !important;
}
.btn.secondary { background: transparent !important; border-color: var(--fs-border) !important; }

.phone-stage { position: relative; min-height: 470px; display: grid; place-items: center; }
.glow { position:absolute; width:340px; height:340px; border-radius:50%; filter: blur(50px); background:linear-gradient(135deg, rgba(139,92,246,.6), rgba(34,211,238,.35)); opacity:.65; }
.phone-card { position:relative; width:250px; height:430px; border-radius:42px; border:1px solid rgba(255,255,255,.18); background: linear-gradient(150deg,#262a55,#11132a 55%,#0b0c1b); box-shadow: var(--fs-shadow); transform: rotate(8deg); overflow:hidden; }
.phone-card::before { content:"★"; position:absolute; inset:0; display:grid; place-items:center; font-size:8rem; color:rgba(255,255,255,.13); }
.phone-card::after { content:"FUNDAS STAR"; position:absolute; left:0; right:0; bottom:30px; text-align:center; font-weight:900; letter-spacing:.18em; color:#e9d5ff; }
.camera { position:absolute; top:22px; left:22px; width:86px; height:86px; border-radius:24px; background:#090a15; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.camera::before,.camera::after { content:""; position:absolute; width:27px; height:27px; border-radius:50%; background:radial-gradient(circle,#111 25%,#334155 28%,#0f172a 62%,#000 65%); }
.camera::before { left:11px; top:11px; }
.camera::after { right:11px; bottom:11px; }

.section { padding: 64px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.section h2 { font-size: clamp(2rem,4vw,3.2rem); margin:0; letter-spacing:-.04em; }
.section-sub { color:var(--fs-muted); max-width:650px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.category-card, .benefit, .content-card { border:1px solid var(--fs-border); background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); border-radius:24px; padding:24px; box-shadow: var(--fs-shadow); }
.category-icon { font-size:2rem; }
.category-card h3, .benefit h3 { margin:14px 0 6px; }
.category-card p, .benefit p { margin:0; color:var(--fs-muted); }

.woocommerce ul.products { display:grid !important; grid-template-columns:repeat(4,1fr); gap:20px; }
.woocommerce ul.products::before,.woocommerce ul.products::after { display:none !important; }
.woocommerce ul.products li.product { width:auto !important; margin:0 !important; float:none !important; border:1px solid var(--fs-border); background:var(--fs-surface); padding:14px !important; border-radius:24px; }
.woocommerce ul.products li.product img { border-radius:17px; background:#fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color:#fff; }
.woocommerce ul.products li.product .price { color:#d8b4fe !important; font-weight:800; }

.page-wrap { padding:54px 0 80px; min-height:65vh; }
.page-wrap article { max-width:900px; }
.page-wrap h1 { font-size:clamp(2.5rem,6vw,4.5rem); }
.entry-content { color:#e8e9f8; }
.entry-content p, .entry-content li { color:var(--fs-muted); }

.site-footer { border-top:1px solid var(--fs-border); padding:34px 0; margin-top:40px; color:var(--fs-muted); }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

.woocommerce .quantity .qty, .woocommerce input.input-text, .woocommerce textarea, .woocommerce select { background:#fff; color:#111; border-radius:8px; }
.woocommerce-message,.woocommerce-info { border-top-color:var(--fs-primary) !important; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns:1fr; }
  .phone-stage { min-height:400px; }
  .grid-4, .woocommerce ul.products { grid-template-columns:repeat(2,1fr) !important; }
  .site-nav { gap:12px; font-size:.92rem; }
}
@media (max-width: 620px) {
  .container { width:min(100% - 24px, 1180px); }
  .header-inner { align-items:flex-start; padding:14px 0; }
  .site-nav { justify-content:flex-end; }
  .grid-4, .woocommerce ul.products { grid-template-columns:1fr !important; }
  .hero { padding-top:48px; }
  .phone-card { transform:rotate(4deg) scale(.9); }
}