:root{
  --bg:#ffffff;
  --text:#14121a;
  --muted:#6c6a74;
  --line:rgba(20,18,26,.08);
  --brand:#e44a73;
  --brand2:#6e49ff;
  --card:#f7f6fb;
  --shadow:0 16px 40px rgba(20,18,26,.12);
  --radius:18px;
  --header-bg:rgba(255,255,255,.78);
  --surface-elevated:#ffffff;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e0c12;
  --text:#f4f2f9;
  --muted:#a39eb2;
  --line:rgba(244,242,249,.12);
  --brand:#f0628a;
  --brand2:#9b7dff;
  --card:#17151f;
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --header-bg:rgba(14,12,18,.9);
  --surface-elevated:#16141e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "League Spartan", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{color:inherit}

.container{max-width:1100px;margin:0 auto;padding:0 18px}

.site-header{
  position:sticky;top:0;z-index:1400;
  background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}

/* Escritorio: sticky + backdrop-filter a veces deja de “pegar”; fixed evita que el menú se vaya al hacer scroll */
@media (min-width:921px){
  .site-header{
    position:fixed;
    left:0;
    right:0;
    top:0;
    width:100%;
    box-sizing:border-box;
    z-index:1500;
  }
  body{
    padding-top:64px;
  }
  body.has-blog-editor-quicklinks{
    padding-top:88px;
  }
  main.main-view{
    scroll-margin-top:72px;
  }
}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;column-gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.2px}
.brand-mark{
  width:12px;height:12px;border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 0 0 6px rgba(228,74,115,.12);
}
.nav{display:flex;gap:14px;align-items:center;margin-left:auto}
.nav-link{
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  padding:8px 4px;
  border-radius:0;
  color:rgba(20,18,26,.76);
  background:transparent;
}
.nav-link:hover{background:transparent;color:var(--text)}
.nav-link.is-active{color:var(--text);background:transparent;font-weight:700;box-shadow:none}
.header-cta{
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
}
.header-cta:hover{border-color:rgba(228,74,115,.35)}
.header-cta--plain{
  border:0;
  border-radius:0;
  padding:8px 4px;
  font-weight:600;
  color:rgba(20,18,26,.82);
}
.header-cta--plain:hover{color:var(--text)}

/* Editor blog: enlaces discretos bajo la barra de navegación, alineados a la derecha */
.blog-editor-quicklinks{
  flex:0 0 100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:0 0 2px;
  box-sizing:border-box;
}
.blog-editor-quicklinks__link{
  font-size:13px;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  color:rgba(20,18,26,.72);
  white-space:nowrap;
}
.blog-editor-quicklinks__link:hover{color:var(--text)}
.blog-editor-quicklinks__sep{
  font-size:13px;
  color:rgba(20,18,26,.38);
  user-select:none;
}
html[data-theme="dark"] .blog-editor-quicklinks__link{color:rgba(241,245,249,.78)}
html[data-theme="dark"] .blog-editor-quicklinks__link:hover{color:var(--text)}
html[data-theme="dark"] .blog-editor-quicklinks__sep{color:rgba(148,163,184,.45)}

.hero{
  padding:42px 0 26px;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:26px;
  align-items:stretch;
}
.hero-copy{
  padding:28px 26px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(228,74,115,.10), rgba(110,73,255,.08));
  border:1px solid var(--line);
}
.eyebrow{margin:0 0 10px;font-weight:700;color:rgba(228,74,115,.95);letter-spacing:.6px;text-transform:uppercase;font-size:12px}
.hero-title{margin:0 0 10px;font-size:44px;line-height:1.05;letter-spacing:-.8px}
.hero-subtitle{margin:0 0 18px;color:rgba(20,18,26,.74);max-width:62ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

.hero-media{
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  background:linear-gradient(135deg, #7b0d2d, #e44a73);
  position:relative;
  min-height:220px;
  box-shadow:var(--shadow);
}
.hero-gradient{
  position:absolute;inset:-40%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.18), transparent 52%),
    radial-gradient(circle at 20% 80%, rgba(110,73,255,.22), transparent 60%);
  transform:rotate(-12deg);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  border:1px solid transparent;
}
.btn-primary{background:linear-gradient(135deg,var(--brand),#ff5a88);color:white;box-shadow:0 12px 30px rgba(228,74,115,.22)}
.btn-primary:hover{filter:saturate(1.05) brightness(1.02)}
.btn-ghost{background:rgba(255,255,255,.72);border-color:rgba(20,18,26,.12)}
.btn-ghost:hover{border-color:rgba(228,74,115,.28)}
.btn-block{width:100%}

/* ADN backoffice: sin magentas del público */
html[data-spa-mode="admin"] .btn-primary{
  background:linear-gradient(135deg,#0f172a,#334155);
  box-shadow:0 12px 30px rgba(2,6,23,.18);
}
html[data-spa-mode="admin"] .btn-primary:hover{filter:saturate(1.05) brightness(1.06)}
html[data-spa-mode="admin"] .btn-ghost:hover{border-color:rgba(51,65,85,.35)}
html[data-spa-mode="editor"] .btn-primary{
  background:linear-gradient(135deg,#0f172a,#334155);
  box-shadow:0 12px 30px rgba(2,6,23,.18);
}
html[data-spa-mode="editor"] .btn-primary:hover{filter:saturate(1.05) brightness(1.06)}
html[data-spa-mode="editor"] .btn-ghost:hover{border-color:rgba(51,65,85,.35)}

.admin-link{
  font-size:14px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  color:rgba(20,18,26,.82);
  padding:8px 2px;
  border-radius:10px;
}
.admin-link:hover{color:rgba(20,18,26,1)}
html[data-theme="dark"] .admin-link{color:rgba(244,242,249,.9)}
html[data-theme="dark"] .admin-link:hover{color:rgba(244,242,249,1)}

.section{padding:44px 0}
.section-head{margin-bottom:16px}
.section-head h2{margin:0 0 8px;font-size:30px;letter-spacing:-.4px}
.section-head p{margin:0;color:rgba(20,18,26,.7)}

.section-split{padding:30px 0}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.split-reverse{grid-template-columns:.95fr 1.05fr}
.split-reverse .split-copy{order:2}
.split-reverse .split-media{order:1}
.split-copy h2{margin:0 0 10px;font-size:30px;letter-spacing:-.4px}
.split-copy p{margin:0 0 10px;color:rgba(20,18,26,.72)}

.media-card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
  padding:14px;
  box-shadow:var(--shadow);
}
.media-thumb{
  height:220px;
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(228,74,115,.20), rgba(110,73,255,.12)),
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.22), transparent 55%);
  border:1px solid rgba(20,18,26,.06);
}
.media-thumb.alt{
  background:
    linear-gradient(135deg, rgba(110,73,255,.16), rgba(228,74,115,.08)),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 65% 75%, rgba(255,255,255,.18), transparent 55%);
}

.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{
  display:inline-flex;align-items:center;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(20,18,26,.10);
  background:rgba(255,255,255,.75);
  font-size:13px;font-weight:600;color:rgba(20,18,26,.74);
}

.section-cta{
  padding:26px 0;
}
.cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 18px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(228,74,115,.10), rgba(110,73,255,.08));
  border:1px solid var(--line);
}
.cta-inner h2{margin:0 0 6px}
.cta-inner p{margin:0;color:rgba(20,18,26,.72)}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:210px;
}
.card-media{
  height:96px;border-radius:14px;
  background:linear-gradient(135deg, rgba(110,73,255,.20), rgba(228,74,115,.18));
  border:1px solid rgba(20,18,26,.06);
}
.card-title{margin:0;font-size:18px}
.card-tag{margin:0;color:rgba(20,18,26,.68);font-size:14px}
.card-link{
  margin-top:auto;
  text-decoration:none;
  font-weight:800;
  color:rgba(228,74,115,.96);
}
.card-link:hover{text-decoration:underline}

.features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.feature{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  padding:16px;
}
.feature h3{margin:0 0 6px}
.feature p{margin:0;color:rgba(20,18,26,.72)}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.blog-card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(255,255,255,.9);
}
.blog-thumb{
  height:120px;
  background:linear-gradient(135deg, rgba(228,74,115,.18), rgba(110,73,255,.16));
  border-bottom:1px solid var(--line);
}
.blog-body{padding:14px}
.blog-kicker{margin:0 0 6px;color:rgba(20,18,26,.62);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:12px}
.blog-title{margin:0 0 6px;font-size:18px}
.blog-excerpt{margin:0;color:rgba(20,18,26,.72)}

.tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.tool{
  text-decoration:none;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tool:hover{border-color:rgba(228,74,115,.28)}
.tool-title{font-weight:800}
.tool-desc{color:rgba(20,18,26,.7)}

.section-newsletter{padding:42px 0}
.newsletter-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:start;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(228,74,115,.08), rgba(110,73,255,.06));
}
.newsletter-copy h2{margin:0 0 8px;font-size:28px;letter-spacing:-.3px}
.newsletter-copy p{margin:0;color:rgba(20,18,26,.72)}
.newsletter-form{display:grid;gap:10px}
.field{display:grid;gap:6px}
.field-label{font-weight:700;font-size:13px;color:rgba(20,18,26,.68)}
.field-input{
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(20,18,26,.14);
  background:rgba(255,255,255,.88);
  outline:none;
}
.field-input:focus{border-color:rgba(228,74,115,.55);box-shadow:0 0 0 4px rgba(228,74,115,.14)}

.site-footer{
  margin-top:26px;
  border-top:1px solid var(--line);
  /* Mismo tono que .nm-submit (newsletter «¡Únete!») */
  background:#1a237e;
  color:rgba(255,255,255,.88);
}
.footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;padding:26px 18px}
.brand--footer .brand-wordmark{filter:brightness(0) invert(1)}
.brand--footer .brand-icon{opacity:.95}
.site-footer .muted{color:rgba(255,255,255,.62)}
.footer-title{margin:0 0 8px;font-weight:800}
.footer-list{list-style:none;padding:0;margin:0;display:grid;gap:6px;color:rgba(255,255,255,.78)}
.social{display:flex;gap:8px;flex-wrap:wrap}
.social-link{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-weight:700;
}
.social-link:hover{border-color:rgba(228,74,115,.45)}
.footer-bottom{padding:0 18px 20px}
.footer-inner--modelo{align-items:start}
.footer-text{margin:0 0 6px;color:rgba(255,255,255,.92);font-size:14px;line-height:1.45}
.footer-text a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-map-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px;
}
.footer-map-link:hover{filter:brightness(1.06)}
.footer-map-icon{flex-shrink:0;display:block}
.footer-text.muted{color:rgba(255,255,255,.62)}
.footer-title--spaced{margin-top:14px}
.footer-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.footer-social-link{
  width:40px;height:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.footer-social-link svg,.footer-social-link img{width:20px;height:20px;display:block}
.footer-social-link:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}

/* Colores por marca */
/* Nota: los PNG pueden ser blancos sobre transparente; evitamos fondos blancos por marca. */
.footer-social-link--tiktok,
.footer-social-link--pinterest,
.footer-social-link--whatsapp,
.footer-social-link--instagram{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.footer-social-link--pending{opacity:.72;cursor:not-allowed}
.footer-social-link--pending:hover{background:#fff;border-color:rgba(15,18,32,.14)}
.footer-bottom--admin{border-top:1px solid rgba(255,255,255,.08);padding-top:14px;margin-top:8px}
.footer-bottom--admin a{color:rgba(255,255,255,.72)}

/* Respaldo (#/linea/…): franja título + zigzag si spa.css no carga o queda cacheado viejo */
.linea-page--sublimacion .linea-hero--band{background:#0a0a0a;color:#fff}
.linea-zigzag-media--placeholder{min-height:180px;border-radius:14px;background:#1a1a1a}
.linea-zigzag-media--has-img img{max-width:100%;height:auto;min-height:180px;object-fit:cover;display:block}
.linea-page--sublimacion .linea-zigzag-media,.linea-page--sublimacion .linea-zigzag-media--has-img{overflow:hidden}
.linea-page--sublimacion .linea-zigzag-media--has-img img{height:100%;min-height:0!important;max-height:100%;object-fit:cover;object-position:center center}
.linea-zigzag-row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:flex-start}
.linea-zigzag-text{flex:1 1 220px;min-width:0}
.linea-zigzag-media{flex:1.1 1 260px;min-width:0}
.linea-page .linea-cta{display:inline-flex;padding:10px 18px;border-radius:999px;font-weight:700;font-size:13px;text-decoration:none}
.linea-page--sublimacion .linea-cta{background:#fff;color:#0a0a0a;border:1px solid rgba(255,255,255,.65)}

@media (max-width: 920px){
  body.has-blog-editor-quicklinks .main-view{
    padding-top:22px;
  }
  .linea-page--sublimacion .linea-zigzag-media,.linea-page--sublimacion .linea-zigzag-media--has-img{height:180px;min-height:180px;max-height:180px}
  .hero-inner{grid-template-columns:1fr}
  .nav{display:none}
  .split,.split-reverse,.newsletter-inner{grid-template-columns:1fr}
  .split-reverse .split-copy,.split-reverse .split-media{order:unset}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .footer-inner{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .hero-title{font-size:36px}
  .grid{grid-template-columns:1fr}
}

html[data-theme="dark"] .field-input {
  background: var(--surface-elevated);
  border-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .field-label {
  color: var(--muted);
}

html[data-theme="dark"] .pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
  color: var(--muted);
}