/*
Theme Name: GeneratePress Child - ABCTIC SEO
Template: generatepress
Version: 1.0
Author: Sagatech
*/

/* ========== HEADER ESTILO PRESTASHOP ABCTIC ========== */

.site-header {
    background-color: #001f46 !important;
    border-bottom: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 100;
}

.site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Logo */
.site-header .site-logo {
    flex-shrink: 0;
    line-height: 1;
}

.site-header .site-logo img {
    width: 150px;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.site-header .site-logo a:hover img {
    opacity: 0.9;
}

/* Ocultar título del sitio en header */
.site-header .site-branding {
    display: none;
}

/* Links del header (tienda) */
.abctic-header-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.abctic-store-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    transition: all 0.3s ease;
    background: transparent;
}

.abctic-store-link:hover,
.abctic-store-link:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    text-decoration: none;
}

.abctic-store-link::before {
    content: "←";
    font-size: 14px;
    opacity: 0.8;
}

/* Responsive header */
@media (max-width: 768px) {
    .site-header .inside-header {
        padding: 10px 15px;
    }
    .site-header .site-logo img {
        width: 120px;
    }
    .abctic-store-link {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ========== BLOG POST DESIGN SYSTEM ========== */
/* Override GP for full-width blog posts */
body.single-post .site-content { padding-top: 0; }
body.single-post .inside-article { padding: 0 !important; margin: 0; max-width: 100%; }
body.single-post .entry-content { margin-top: 0; }
/* ABTIC: entry-header title restored - content now uses native Gutenberg blocks instead of a custom hero header */

:root{
  --brand:#001f46;
  --brand-2:#0a2f5f;
  --accent:#1377e6;
  --accent-dark:#0b5fbd;
  --ink:#111827;
  --text:#334155;
  --muted:#667085;
  --line:#d9dee7;
  --line-strong:#c8d0dc;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --surface-3:#eef2f6;
  --success:#177245;
  --radius:10px;
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --shadow-soft:0 3px 12px rgba(16,24,40,.06);
  --wide:1240px;
  --content:820px;
}

.blog-post-wrapper *{box-sizing:border-box}
.blog-post-wrapper{
  background:#fff;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.blog-post-wrapper a{color:var(--brand);text-underline-offset:3px}
.blog-post-wrapper img{display:block;max-width:100%;height:auto}
.blog-post-wrapper button,.blog-post-wrapper input{font:inherit}

.reading-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--accent);z-index:1000;
}

.breadcrumbs{
  width:min(var(--wide),calc(100% - 32px));margin:20px auto;
  font-size:.84rem;color:var(--muted);
}
.breadcrumbs a{color:var(--muted);text-decoration:none}

.hero{
  width:min(var(--wide),calc(100% - 32px));
  margin:0 auto 28px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
  min-height:470px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.hero-copy{
  padding:54px 58px;
  display:flex;flex-direction:column;justify-content:center;
}

.kicker{
  color:var(--accent);font-size:.78rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:14px;
}

.blog-post-wrapper h1{
  font-size:clamp(2.6rem,5vw,4.6rem);
  line-height:1.03;
  letter-spacing:-.045em;
  margin:0 0 22px;
  color:var(--brand);
  max-width:13ch;
}

.hero-lead{
  font-size:1.08rem;color:var(--text);
  max-width:60ch;margin:0 0 24px;
}

.hero-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  color:var(--muted);font-size:.86rem;
  border-top:1px solid var(--line);
  padding-top:18px;
}

.hero-media{
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  padding:30px;
  border-left:1px solid var(--line);
}

.hero-media img{
  width:100%;height:100%;max-height:410px;
  object-fit:contain;
}

.quick-nav{
  width:min(var(--wide),calc(100% - 32px));
  margin:0 auto 34px;
  display:flex;gap:10px;flex-wrap:wrap;
}

.quick-nav a{
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink);text-decoration:none;
  background:#fff;font-size:.87rem;font-weight:700;
}
.quick-nav a:hover{border-color:var(--accent);color:var(--accent)}

.layout{
  width:min(var(--wide),calc(100% - 32px));
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:46px;align-items:start;
}

.article-body{max-width:var(--content)}
.article-body p{font-size:1.04rem;color:var(--text)}
.article-body h2{
  scroll-margin-top:100px;
  font-size:2rem;line-height:1.2;
  letter-spacing:-.03em;
  color:var(--brand);
  margin:62px 0 18px;
}

.article-body h3{
  scroll-margin-top:100px;
  font-size:1.25rem;line-height:1.28;
  color:var(--ink);
  margin:34px 0 10px;
}

.intro{
  padding:22px 24px;
  border-left:4px solid var(--accent);
  background:var(--surface-2);
  margin:0 0 28px;
}
.intro p{margin:0}

.use-list{
  display:grid;grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);
  border-radius:10px;overflow:hidden;
  margin:24px 0 30px;
  background:#fff;
}

.use-item{
  padding:20px 22px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.use-item:nth-child(2n){border-right:0}
.use-item:nth-last-child(-n+2){border-bottom:0}
.use-item strong{display:block;margin-bottom:5px;color:var(--brand)}
.use-item p{margin:0;font-size:.93rem;color:var(--muted)}

.spec-table{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  margin:26px 0;
}

.spec-row{
  display:grid;grid-template-columns:170px 1fr;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.spec-row:last-child{border-bottom:0}
.spec-label{
  background:var(--surface-2);
  padding:18px;
  font-weight:800;color:var(--brand);
}
.spec-content{padding:18px 20px;color:var(--text)}
.spec-content p{margin:0;font-size:.97rem}

.article-image{
  margin:32px 0;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.article-image img{
  width:100%;
  max-height:520px;
  object-fit:contain;
  background:var(--surface-2);
}
.article-image figcaption{
  padding:12px 15px;
  font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--line);
}

.comparison{
  margin:28px 0;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.comparison-scroll{overflow-x:auto}
.blog-post-wrapper table{width:100%;border-collapse:collapse;min-width:760px}
.blog-post-wrapper th{
  padding:14px 16px;text-align:left;
  background:var(--brand);color:#fff;
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
}
.blog-post-wrapper td{
  padding:15px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;color:var(--text);
}
.blog-post-wrapper tbody tr:last-child td{border-bottom:0}
.blog-post-wrapper tbody tr:hover{background:#fafbfc}
.blog-post-wrapper td:first-child{font-weight:800;color:var(--ink)}
.table-link{
  display:inline-flex;
  padding:8px 12px;
  border-radius:6px;
  text-decoration:none;
  background:var(--accent);
  color:#fff;font-weight:800;font-size:.84rem;
}
.table-link:hover{background:var(--accent-dark)}

.recommendation-box{
  margin:34px 0;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#f8fafc);
  box-shadow:var(--shadow-soft);
}
.recommendation-box h3{
  margin:0 0 8px;color:var(--brand);
}
.recommendation-box p{margin:0 0 18px}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn-primary,.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px;border-radius:6px;
  text-decoration:none;font-weight:800;font-size:.92rem;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{border:1px solid var(--line-strong);color:var(--brand);background:#fff}

.blog-post-wrapper .faq details{
  border-top:1px solid var(--line);
  background:#fff;
}
.blog-post-wrapper .faq details:last-child{border-bottom:1px solid var(--line)}
.blog-post-wrapper .faq summary{
  padding:16px 4px;
  cursor:pointer;
  list-style:none;
  display:flex;justify-content:space-between;
  gap:16px;font-weight:800;
}
.blog-post-wrapper .faq summary::-webkit-details-marker{display:none}
.blog-post-wrapper .faq summary:after{content:"+";color:var(--accent);font-size:1.25rem}
.blog-post-wrapper .faq details[open] summary:after{content:"−"}
.blog-post-wrapper .faq p{margin:0 0 18px}

.related-list{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px;margin-top:18px;
}
.related-item{
  display:block;
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  text-decoration:none;
  color:var(--ink);
  background:#fff;
}
.related-item:hover{border-color:var(--accent)}
.related-item strong{display:block}
.related-item span{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}

.sidebar{
  position:sticky;top:100px;
  display:grid;gap:16px;
}
.side-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:20px;
}
.side-card h3{
  margin:0 0 14px;
  color:var(--brand);
  font-size:1rem;
}
.toc{
  display:grid;gap:4px;
}
.toc a{
  padding:8px 10px;
  text-decoration:none;
  color:var(--muted);
  font-size:.89rem;
  border-left:2px solid transparent;
}
.toc a:hover,.toc a.active{
  color:var(--brand);
  border-left-color:var(--accent);
  background:var(--surface-2);
}

.trust-row{
  display:flex;justify-content:space-between;
  gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.trust-row:last-child{border-bottom:0}
.trust-row strong{color:var(--success)}

.product-card{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;background:#fff;
}
.product-card img{
  width:100%;height:190px;
  object-fit:contain;background:var(--surface-2);
  padding:16px;
}
.product-card-body{padding:18px}
.product-card small{color:var(--muted)}
.product-card h3{margin:6px 0 10px;font-size:1rem}
.product-card a{
  display:block;text-align:center;
  margin-top:14px;padding:10px;
  border-radius:6px;
  background:var(--accent);color:#fff;
  text-decoration:none;font-weight:800;
}

@media(max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero-media{border-left:0;border-top:1px solid var(--line);min-height:340px}
  .layout{grid-template-columns:1fr}
  .article-body{max-width:none}
  .sidebar{position:static;grid-template-columns:repeat(2,1fr)}
  .side-card:first-child{display:none}
}

@media(max-width:680px){
  .hero-copy{padding:34px 24px}
  .hero-media{padding:18px;min-height:280px}
  .hero-media img{max-height:260px}
  .layout{gap:22px}
  .use-list,.related-list,.sidebar{grid-template-columns:1fr}
  .use-item{border-right:0}
  .use-item:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .use-item:last-child{border-bottom:0}
  .spec-row{grid-template-columns:1fr}
  .spec-label{border-bottom:1px solid var(--line)}
}
/* ===== Quick visual polish overrides applied by assistant ===== */
/* Limit readable width and improve leading */
.abt-post, .blog-post-wrapper, .article-body { max-width: 980px; margin-left: auto; margin-right: auto; }
.abt-post p { max-width: 72ch; }
.abt-post h1 { font-size: 2.6rem; }
.abt-post h2 { font-size: 1.6rem; }
.abt-post { font-size: 17px; }
.abt-post .abt-hero img { box-shadow: 0 18px 50px rgba(12,22,40,.12); }
/* Improve CTA visibility */
.abt-btn-primary { box-shadow: 0 8px 24px rgba(14,124,224,.18); }
.abt-rel-card { padding: 1rem; }
/* Mobile tweaks */
@media(max-width:680px){
  .abt-post h1 { font-size: 1.9rem; }
  .abt-post { padding-left: 14px; padding-right: 14px; }
}

/* ABTIC_POST_CONTENT_CSS_START */
/* Canonical ABCTIC blog post CSS migrated from post inline style */
.abt-post {
  --abt-navy: #001f46;
  --abt-ink: #142743;
  --abt-slate: #5b6b82;
  --abt-line: #dde5ee;
  --abt-mist: #f2f6fa;
  --abt-paper: #ffffff;
  --abt-accent: #0e7ce0;
  --abt-accent-dark: #0a5cab;
  --abt-radius: 14px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--abt-ink);
  max-width: 100%;
}
.abt-post *, .abt-post *::before, .abt-post *::after { box-sizing: border-box; }
.abt-post img { max-width: 100%; height: auto; display: block; }
.abt-post a { color: var(--abt-accent); text-decoration: none; }
.abt-post a:hover { color: var(--abt-accent-dark); text-decoration: underline; }
.abt-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--abt-navy), var(--abt-accent)); z-index: 9999; transition: width .1s linear; }
.abt-crumbs { font-size: .82rem; color: var(--abt-slate); display: flex; flex-wrap: wrap; gap: .4em; align-items: center; margin: 0 0 1.4rem; }
.abt-crumbs a { color: var(--abt-slate); }
.abt-crumbs span[aria-hidden] { opacity: .5; }
.abt-crumbs strong { color: var(--abt-ink); font-weight: 600; }
.abt-header { margin-bottom: 1.8rem; }
.abt-kicker { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--abt-navy); background: var(--abt-mist); border: 1px solid var(--abt-line); border-radius: 999px; padding: .35em 1em; margin-bottom: .9rem; }
.abt-lead { font-size: 1.22rem; line-height: 1.55; color: var(--abt-slate); margin: 0 0 1.1rem; max-width: 46em; }
.abt-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .84rem; color: var(--abt-slate); padding: .8rem 0; border-top: 1px solid var(--abt-line); border-bottom: 1px solid var(--abt-line); }
.abt-meta strong { color: var(--abt-ink); font-weight: 600; }
.abt-hero { margin: 1.6rem 0 2rem; }
.abt-hero img { border-radius: var(--abt-radius); width: 100%; object-fit: cover; }
.abt-hero figcaption { font-size: .82rem; color: var(--abt-slate); margin-top: .6rem; }
.abt-toc { background: var(--abt-mist); border: 1px solid var(--abt-line); border-radius: var(--abt-radius); padding: 1.2rem 1.4rem; margin: 0 0 2.2rem; }
.abt-toc-title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--abt-navy); margin: 0 0 .7rem; }
.abt-toc ol { margin: 0; padding: 0 0 0 1.2em; }
.abt-toc li { margin: .3em 0; }
.abt-toc a { color: var(--abt-ink); }
.abt-toc a.abt-active { color: var(--abt-accent); font-weight: 600; }
.abt-post h2 { font-size: 1.55rem; line-height: 1.25; color: var(--abt-navy); margin: 2.6rem 0 1rem; padding-top: .4rem; scroll-margin-top: 90px; }
.abt-post h2::after { content: ""; display: block; width: 46px; height: 3px; background: var(--abt-accent); border-radius: 2px; margin-top: .5rem; }
.abt-post h3 { font-size: 1.15rem; color: var(--abt-ink); margin: 1.6rem 0 .6rem; }
.abt-post p { margin: 0 0 1.1rem; }
.abt-callout { background: var(--abt-mist); border-left: 4px solid var(--abt-navy); border-radius: 0 var(--abt-radius) var(--abt-radius) 0; padding: 1.1rem 1.4rem; margin: 0 0 1.6rem; font-size: 1.06rem; font-weight: 600; color: var(--abt-navy); }
.abt-uses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.4rem 0 1.8rem; }
.abt-use { background: var(--abt-paper); border: 1px solid var(--abt-line); border-radius: var(--abt-radius); padding: 1.1rem 1.2rem; transition: border-color .2s, transform .2s; }
.abt-use:hover { border-color: var(--abt-accent); transform: translateY(-2px); }
.abt-use strong { display: block; color: var(--abt-navy); margin-bottom: .35rem; }
.abt-use p { margin: 0; font-size: .93rem; color: var(--abt-slate); }
.abt-specs { margin: 1.4rem 0 1.8rem; border-top: 1px solid var(--abt-line); }
.abt-spec { display: grid; grid-template-columns: 170px 1fr; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--abt-line); }
.abt-spec-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--abt-paper); background: var(--abt-navy); border-radius: 8px; padding: .5em .8em; height: fit-content; text-align: center; }
.abt-spec p { margin: 0; }
.abt-table-wrap { overflow-x: auto; margin: 1.4rem 0 1.8rem; border: 1px solid var(--abt-line); border-radius: var(--abt-radius); -webkit-overflow-scrolling: touch; }
.abt-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 640px; }
.abt-table th { background: var(--abt-navy); color: #fff; text-align: left; padding: .8rem 1rem; font-weight: 600; white-space: nowrap; }
.abt-table td { padding: .8rem 1rem; border-top: 1px solid var(--abt-line); vertical-align: top; }
.abt-table tbody tr:nth-child(even) { background: var(--abt-mist); }
.abt-table .abt-tlink { display: inline-block; font-weight: 600; color: var(--abt-accent); white-space: nowrap; }
.abt-cta { background: var(--abt-navy); background-image: radial-gradient(circle at 85% 15%, rgba(14,124,224,.35), transparent 55%); color: #fff; border-radius: var(--abt-radius); padding: 1.8rem; margin: 2.4rem 0; }
.abt-cta h3 { color: #fff; margin: 0 0 .5rem; font-size: 1.25rem; }
.abt-cta p { color: rgba(255,255,255,.85); margin: 0 0 1.2rem; }
.abt-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.abt-btn { display: inline-block; padding: .7em 1.5em; border-radius: 10px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.abt-btn:hover { transform: translateY(-1px); text-decoration: none; }
.abt-btn-primary { background: var(--abt-accent); color: #fff !important; }
.abt-btn-primary:hover { background: var(--abt-accent-dark); color: #fff !important; }
.abt-btn-ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.45); }
.abt-btn-ghost:hover { border-color: #fff; }
.abt-faq { margin: 1.2rem 0 1.8rem; }
.abt-faq details { border: 1px solid var(--abt-line); border-radius: 10px; margin-bottom: .7rem; background: var(--abt-paper); }
.abt-faq summary { cursor: pointer; padding: .95rem 1.2rem; font-weight: 600; color: var(--abt-navy); list-style: none; position: relative; }
.abt-faq summary::-webkit-details-marker { display: none; }
.abt-faq summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--abt-accent); }
.abt-faq details[open] summary::after { content: "–"; }
.abt-faq details p { padding: 0 1.2rem 1rem; margin: 0; color: var(--abt-slate); }
.abt-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.2rem 0 .6rem; }
.abt-rel-card { display: block; border: 1px solid var(--abt-line); border-radius: var(--abt-radius); padding: 1.1rem 1.2rem; color: var(--abt-ink) !important; text-decoration: none !important; transition: border-color .2s, transform .2s; }
.abt-rel-card:hover { border-color: var(--abt-accent); transform: translateY(-2px); }
.abt-rel-card strong { display: block; color: var(--abt-navy); margin-bottom: .3rem; }
.abt-rel-card span { font-size: .9rem; color: var(--abt-slate); }
.abt-rel-card em { display: inline-block; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--abt-accent); margin-top: .6rem; }
.abt-author { display: flex; gap: 1.1rem; align-items: center; background: var(--abt-mist); border: 1px solid var(--abt-line); border-radius: var(--abt-radius); padding: 1.2rem 1.4rem; margin: 2.4rem 0 0; }
.abt-author-badge { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: var(--abt-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.abt-author p { margin: 0; font-size: .9rem; color: var(--abt-slate); }
.abt-author strong { color: var(--abt-navy); }
@media (max-width: 640px) {
  .abt-post { font-size: 16px; }
  .abt-uses, .abt-related { grid-template-columns: 1fr; }
  .abt-spec { grid-template-columns: 1fr; gap: .5rem; }
  .abt-spec-label { text-align: left; width: fit-content; }
  .abt-cta { padding: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .abt-post *, .abt-progress { transition: none !important; }
}
/* ABTIC_POST_CONTENT_CSS_END */