/* ========= Reinas del Arte · Sistema de diseño ========= */

/* Variables */
:root{
  --brand:#ec4899;   /* rosa principal */
  --brand-2:#db2777; /* rosa oscuro (hover) */
  --ink:#111827;     /* texto principal */
  --muted:#6b7280;   /* texto secundario */
  --bg:#ffffff;      /* fondo */
  --card:#f8fafc;    /* tarjetas */
  --ring:#e5e7eb;    /* bordes suaves */
  --accent:#f59e0b;  /* dorado sutil */
}

/* Reset suave + tipografía */
html, body{
  margin:6px; padding:6px; background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block; border-radius:12px}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-2); text-decoration:underline}

/* Contenedor y secciones */
.container{max-width:1100px; margin:0 auto; padding:0 20px}
section{padding:64px 0; border-top:1px solid var(--ring)}
.muted{color:var(--muted)}
.lead{font-size:1.1rem; color:var(--muted); max-width:54ch}

/* Header / Nav */
header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--ring)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:.625rem; font-weight:800; letter-spacing:.3px}
.brand-badge{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),#f472b6); color:#fff}
nav a{color:var(--ink); text-decoration:none; font-weight:600; margin-left:18px}
nav a.btn{padding:10px 16px; border-radius:999px; background:var(--brand); color:#fff; border:2px solid var(--brand)}
nav a.btn:hover{background:var(--brand-2); border-color:var(--brand-2)}
.burger{display:none; background:none; border:0}

/* Banner promocional */
.banner{background:var(--brand); color:#fff; text-align:center; padding:10px 20px; font-weight:700; position:relative}
.banner a{color:#fff; text-decoration:underline}
.banner .close, .banner button{position:absolute; right:12px; top:8px; background:none; border:none; color:#fff; font-size:1rem; cursor:pointer}

/* Hero */
.hero{position:relative; overflow:hidden;
  background:radial-gradient(1200px 600px at 80% 0%, #fdf2f8 0%, #ffffff 45%),
             linear-gradient(180deg,#ffffff,#fdf2f8 85%)}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; padding:70px 0; align-items:center}
.eyebrow{display:inline-block; font-size:.85rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); background:#fdf2f8; border:1px solid #fbcfe8; padding:6px 10px; border-radius:999px}
h1{font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:.6rem 0 1rem 0}
.hero-card{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:14px}
.poster{aspect-ratio:4/5; border-radius:12px; background:linear-gradient(180deg,#fbcfe8,#fdf2f8);
  display:grid; place-items:center; border:1px solid var(--ring)}
.poster img{width:100%; height:100%; object-fit:cover; border-radius:12px}
.poster-caption{text-align:center; font-weight:700; margin-top:10px}

/* Botones */
.btn{display:inline-block; font-weight:800; text-decoration:none; border-radius:999px; padding:14px 20px; border:2px solid var(--ink)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-2); border-color:var(--brand-2)}
.btn.secondary{background:#fff; border-color:var(--ink); color:var(--ink)}
.btn.ghost{background:transparent; border-color:var(--ring); color:var(--ink)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}

/* Cards, grids, etiquetas */
.card{background:#fff; border:1px solid var(--ring); border-radius:18px; padding:20px}
.card h3{margin-top:0; margin-bottom:10px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tag{display:inline-block; background:#fff7ed; border:1px solid #fed7aa; color:#b45309; padding:6px 10px; border-radius:999px;
  font-weight:700; font-size:.82rem}

/* Precios / planes */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.price{font-size:2rem; font-weight:900}
.plan .features{margin:14px 0 0 0; padding:0; list-style:none}
.plan .features li{padding:6px 0; border-bottom:1px dashed var(--ring)}
.plan .features li:last-child{border-bottom:0}

/* Tienda (categorías visuales genéricas) */
#tienda .card{text-align:center}
#tienda h3 a{color:var(--ink); text-decoration:none}
#tienda .btn.primary{margin-top:6px}

/* Footer */
footer{padding:36px 0; background:#fff; border-top:1px solid var(--ring)}
footer .links{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:16px}
footer a{color:var(--muted)}

/* Formularios (newsletter / Forminator / genérico) */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea, select{
  width:100%; padding:12px 14px; border:1px solid var(--ring); border-radius:10px; background:#fff; color:var(--ink)
}
input:focus, textarea:focus, select:focus{outline:2px solid #fbcfe8; border-color:#f9a8d4}
button, input[type="submit"]{cursor:pointer}

/* Utilidades rápidas */
.text-center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
.p-0{padding:0}.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:16px}.p-4{padding:24px}

/* Responsivo */
@media (max-width:880px){
  nav{display:none}
  .burger{display:block}
  #mobile{display:none; border-top:1px solid var(--ring)}
  #mobile a{display:block; padding:14px 20px; border-bottom:1px solid var(--ring); text-decoration:none; color:var(--ink); font-weight:700}
  #mobile a.btn{margin:12px 20px}
  .hero .wrap{grid-template-columns:1fr}
  .grid-3, .pricing{grid-template-columns:1fr}
}

/* WooCommerce mínimos para coherencia visual */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--brand); color:#fff; border-radius:999px; border:2px solid var(--brand); padding:10px 18px; font-weight:800
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background:var(--brand-2); border-color:var(--brand-2)
}
.woocommerce div.product .price, .woocommerce ul.products li.product .price{color:var(--ink); font-weight:800}
.woocommerce-message, .woocommerce-info, .woocommerce-error{border-top-color:var(--brand)}