/*
Theme Name: Synck Child
Theme URI: http://wordpressriverthemes.com/synck/
Template: synck
Author: WordPressRiver
Author URI: https://themeforest.net/user/wordpressriver
Description: Introducing a WordPress theme tailored for IT services and business consulting, making it the optimal design choice for businesses in 2024.
Tags: agency business,corporate,creative,digital,innovative,it,it solutions,IT Solutions Template,modern,saas,software company,software template,startup,technology company,technology template.
Version: 3.0.0.1732089229
Updated: 2024-11-20 07:53:49

*/


/* ══════════════════════════════════════════════════════════════
   ICS · Instituto de Ciberseguridad — Sistema de diseño
   Child theme de Synck · v1.0 · iciberseguridad.io
   Este bloque es 100% editable — todo el retema del sitio pasa
   por las variables :root de abajo, que Synck ya usa en todo su
   CSS. Cambiar un valor aquí cambia el sitio entero.
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Retema del motor Synck (variables nativas del tema) ── */
:root {
  --dark1:          #0D0F14;   /* ICS Tinta — antes #1C1C1C */
  --dark2:          #4A5568;   /* ICS Pizarra — antes #454545 */
  --light_white:    #F5F3EE;   /* ICS Papel — antes #F9F9F9 */
  --primary_color:  #1A6B5A;   /* ICS Verde — antes #1351D8 */
  --primary_color2: #22876F;   /* ICS Verde Claro — antes #4F8DFF */
  --primary_light:  #EAF2EF;   /* tinte verde 8% — antes #F3F6FD */
  --primary_light2: rgba(26,107,90,0.10);
  --gray:           #D8D5CE;   /* ICS Bruma cálido — antes #D9D9D9 */
  --font_syne:      'Manrope', sans-serif;      /* titulares — antes Syne */
  --font_yantramanv:'DM Mono', monospace;       /* eyebrows/meta — antes Yantramanav */
  --font_dm:        'Manrope', sans-serif;      /* cuerpo — antes DM Sans */
  --yellow_color:   #B8923A;   /* ICS Oro — antes #FFD600 */

  /* tokens propios ICS, para los componentes nuevos de abajo */
  --ics-ink:    #0D0F14;
  --ics-steel:  #2B3A4A;
  --ics-slate:  #4A5568;
  --ics-mist:   #8C9BAA;
  --ics-green:  #1A6B5A;
  --ics-gl:     #22876F;
  --ics-signal: #C8401A;
  --ics-gold:   #B8923A;
  --ics-paper:  #F5F3EE;
  --ics-paper2: #ECEAE4;
  --ics-rule:   rgba(13,15,20,0.09);
}

/* ── Parches puntuales a colores que Synck trae fijos en hex
   (no todos sus componentes usan las variables de arriba) ── */
.theme-btn2 { background: rgba(26,107,90,0.1); }
.theme-btn, .theme-btn2 { font-family: var(--font_dm); font-weight: 600; }

body { background-color: var(--ics-paper); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font_syne); font-weight: 800; letter-spacing: -0.01em; color: var(--ics-ink); }
p,li,td,th { font-family: var(--font_dm); color: var(--ics-slate); line-height: 1.7; }

/* ══════════════ Componentes ICS reutilizables ══════════════ */

.ics-eyebrow {
  font-family: var(--font_yantramanv);
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ics-green); display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.ics-eyebrow::after { content:''; flex:1; height:1px; background: var(--ics-rule); max-width: 80px; }
.ics-eyebrow.on-dark { color: var(--ics-gl); }
.ics-eyebrow.on-dark::after { background: rgba(255,255,255,0.1); }

.ics-mono { font-family: var(--font_yantramanv); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ics-mist); }
.ics-mono.green { color: var(--ics-green); }
.ics-mono.signal { color: var(--ics-signal); }

.ics-btn-primary, .ics-btn-secondary {
  font-family: var(--font_dm); font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border-radius: 30px; cursor: pointer; transition: .3s;
  text-decoration: none !important;
}
.ics-btn-primary { background: var(--ics-green); color: #fff; border: 1px solid var(--ics-green); }
.ics-btn-primary:hover { background: var(--ics-gl); border-color: var(--ics-gl); color: #fff; }
.ics-btn-secondary { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.18); }
.ics-btn-secondary:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

.ics-badge {
  font-family: var(--font_yantramanv); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px; display: inline-block;
}
.ics-badge.research { background: rgba(26,107,90,0.1); color: #0F6E56; }
.ics-badge.security { background: rgba(200,64,26,0.1); color: #993C1D; }
.ics-badge.tool     { background: rgba(184,146,58,0.12); color: #854F0B; }
.ics-badge.new      { background: var(--ics-green); color: #fff; }

.ics-pub-card {
  background: #fff; border-radius: 18px; border: 1px solid var(--ics-rule);
  border-left: 4px solid var(--ics-green); padding: 28px; transition: transform .25s, border-color .25s;
}
.ics-pub-card:hover { transform: translateY(-4px); border-left-color: var(--ics-gl); }
.ics-pub-card.alert-type { border-left-color: var(--ics-signal); }
.ics-pub-card.tool-type  { border-left-color: var(--ics-gold); }

.ics-quote {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 24px; line-height: 1.5;
  color: var(--ics-ink); padding-left: 22px; border-left: 3px solid var(--ics-green); margin: 20px 0;
}

.ics-rule { height: 1px; background: var(--ics-rule); margin: 24px 0; }
.ics-rule.green { background: var(--ics-green); height: 3px; border-radius: 2px; }

.ics-section-alt  { background-color: var(--ics-paper2); }
.ics-section-dark { background-color: var(--ics-ink); }
.ics-section-dark h1, .ics-section-dark h2, .ics-section-dark h3 { color: #fff; }
.ics-section-dark p { color: rgba(255,255,255,0.55); }

/* ── Ticker de inteligencia ── */
.ics-ticker { background: var(--ics-ink); border-top: 1px solid rgba(26,107,90,0.35); border-bottom: 1px solid rgba(26,107,90,0.35); overflow: hidden; padding: 14px 0; }
.ics-ticker-inner { display: flex; gap: 64px; white-space: nowrap; animation: ics-ticker 26s linear infinite; width: max-content; }
.ics-ticker-item { font-family: var(--font_yantramanv); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 10px; }
.ics-ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ics-green); flex-shrink: 0; }
.ics-ticker-dot.alert { background: var(--ics-signal); }
@keyframes ics-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 768px) { .ics-ticker-inner { animation-duration: 16s; } }

/* ══════════════ Header / Footer ICS ══════════════ */
.ics-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(13,15,20,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ics-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; min-height: 68px; display: flex; align-items: center; justify-content: space-between; }
.ics-nav-brand { font-family: var(--font_yantramanv); font-size: 12px; letter-spacing: 0.16em; color: var(--ics-gl); text-decoration: none !important; display: flex; align-items: center; gap: 10px; }
.ics-nav-brand img { height: 24px; width: auto; }
.ics-nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.ics-nav-links a { font-family: var(--font_dm); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.55); text-decoration: none !important; transition: color .2s; }
.ics-nav-links a:hover, .ics-nav-links a.current { color: #fff; }
.ics-nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }
@media (max-width: 900px) {
  .ics-nav-links { position: fixed; inset: 68px 0 0 0; background: var(--ics-ink); flex-direction: column; padding: 32px 40px; gap: 20px; transform: translateY(-110%); transition: transform .3s; }
  .ics-nav-links.open { transform: translateY(0); }
  .ics-nav-toggle { display: block; }
}

.ics-footer { background: var(--ics-ink); border-top: 1px solid rgba(26,107,90,0.2); padding: 64px 40px 0; }
.ics-footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.ics-footer-col h4 { font-family: var(--font_yantramanv); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ics-mist); font-weight: 500; margin-bottom: 16px; }
.ics-footer-col p, .ics-footer-col a { font-family: var(--font_dm); font-size: 13px; color: rgba(255,255,255,0.5); line-height: 2; text-decoration: none !important; display: block; }
.ics-footer-col a:hover { color: #fff; }
.ics-footer-bar { border-top: 1px solid rgba(255,255,255,0.06); max-width: 1280px; margin: 0 auto; padding: 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ics-footer-bar span { font-family: var(--font_yantramanv); font-size: 10px; letter-spacing: 0.08em; color: #3d4c5a; }
@media (max-width: 900px) { .ics-footer-grid { grid-template-columns: 1fr; } }

/* ══════════════ Home — secciones ══════════════ */
.ics-hero { background: var(--ics-ink); min-height: 88vh; display: flex; align-items: flex-end; padding: 64px 40px 0; position: relative; overflow: hidden; }
.ics-hero-inner { max-width: 1280px; margin: 0 auto; width: 100%; }
.ics-hero h1 { color: #fff; font-size: clamp(40px,6vw,84px); line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; max-width: 820px; margin-bottom: 20px; }
.ics-hero .ics-lede { font-family: var(--font_dm); color: rgba(255,255,255,0.55); font-size: 17px; max-width: 520px; margin-bottom: 32px; }
.ics-hero .ics-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
.ics-stats { border-top: 1px solid rgba(255,255,255,0.08); display: grid; grid-template-columns: repeat(4,1fr); }
.ics-stat { padding: 28px 0; }
.ics-stat b { display: block; font-family: var(--font_syne); font-size: 34px; color: #fff; font-weight: 800; }
.ics-stat span { font-family: var(--font_yantramanv); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ics-mist); }
@media (max-width: 900px) { .ics-stats { grid-template-columns: repeat(2,1fr); } .ics-hero { padding: 48px 20px 0; } }

.ics-mission { padding: 96px 40px; }
.ics-mission-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.ics-mission-inner > div:first-child { border-right: 1px solid var(--ics-rule); padding-right: 48px; }
.ics-pillar { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--ics-rule); }
.ics-pillar:last-child { border-bottom: none; }
.ics-pillar b.n { font-family: var(--font_yantramanv); color: var(--ics-green); font-size: 13px; flex-shrink: 0; }
.ics-pillar h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ics-pillar p { font-size: 13px; margin: 0; }
@media (max-width: 900px) { .ics-mission-inner { grid-template-columns: 1fr; } .ics-mission-inner > div:first-child { border-right: none; border-bottom: 1px solid var(--ics-rule); padding-right: 0; padding-bottom: 32px; } }

.ics-method { padding: 96px 40px; }
.ics-method-inner { max-width: 1280px; margin: 0 auto; }
.ics-method-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 32px; }
.ics-method-step { background: #fff; border-radius: 18px; padding: 26px; position: relative; }
.ics-method-step .n { font-family: var(--font_yantramanv); color: var(--ics-green); font-size: 12px; }
.ics-method-step h4 { font-size: 15px; margin: 10px 0 6px; }
.ics-method-step p { font-size: 13px; margin: 0; }
.ics-method-step:not(:last-child)::after { content: '→'; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); color: var(--ics-green); font-size: 18px; }
@media (max-width: 900px) { .ics-method-grid { grid-template-columns: 1fr 1fr; } .ics-method-step::after { display: none; } }

.ics-research { padding-top: 96px; }
.ics-research-featured { background: var(--ics-ink); border-radius: 22px; margin: 32px 40px 0; padding: 48px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.ics-research-featured h3 { color: #fff; font-size: 28px; max-width: 640px; }
.ics-research-featured p { color: rgba(255,255,255,0.55); max-width: 560px; }
.ics-research-grid { max-width: 1280px; margin: 32px auto 96px; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .ics-research-grid { grid-template-columns: 1fr; } }

.ics-eco { padding: 96px 0; }
.ics-eco-grid { max-width: 1280px; margin: 0 auto 0; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; border-radius: 22px; overflow: hidden; }
.ics-eco-col { padding: 48px 40px; }
.ics-eco-col.ics-white { background: #fff; }
.ics-eco-col.ics-black { background: var(--ics-ink); }
.ics-eco-col.ics-black h3, .ics-eco-col.ics-black p { color: #fff; }
.ics-eco-col.ics-black p { color: rgba(255,255,255,0.5); }
.ics-eco-divider { width: 6px; background: var(--ics-green); }
.ics-eco-statement { background: var(--ics-green); text-align: center; padding: 56px 40px; margin-top: 3px; }
.ics-eco-statement p { font-family: 'Cormorant Garamond', serif; font-style: italic; color: #fff; font-size: 26px; max-width: 720px; margin: 0 auto; }
@media (max-width: 900px) { .ics-eco-grid { grid-template-columns: 1fr; border-radius: 0; } .ics-eco-divider { width: 100%; height: 6px; } }

.ics-manifesto { background: var(--ics-ink); padding: 96px 40px; }
.ics-manifesto-inner { max-width: 900px; margin: 0 auto; }
.ics-manifesto-row { display: flex; gap: 28px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.07); align-items: baseline; }
.ics-manifesto-row .n { font-family: var(--font_yantramanv); color: var(--ics-green); font-size: 13px; flex-shrink: 0; width: 28px; }
.ics-manifesto-row p { font-family: var(--font_syne); color: #fff; font-size: 22px; font-weight: 500; margin: 0; }

.ics-cta-cascade { padding: 0 40px 96px; }
.ics-cta-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.ics-cta-col { border-radius: 20px; padding: 40px 32px; }
.ics-cta-col.ics-black { background: var(--ics-ink); }
.ics-cta-col.ics-black h4 { color: #fff; }
.ics-cta-col.ics-black p { color: rgba(255,255,255,0.5); }
.ics-cta-col.ics-white { background: #fff; border: 1px solid var(--ics-rule); }
@media (max-width: 900px) { .ics-cta-grid { grid-template-columns: 1fr; } }

/* Formulario Fluent Forms con identidad ICS (si se usa en la col. de suscripción) */
.fluentform .ff-el-input { background: var(--ics-paper); border: 1px solid rgba(13,15,20,0.15); border-radius: 12px; font-family: var(--font_dm); font-size: 14px; color: var(--ics-ink); padding: 12px 16px; }
.fluentform .ff-el-input:focus { border-color: var(--ics-green); outline: none; box-shadow: none; }
.fluentform .ff-btn-submit { background: var(--ics-green) !important; border: none; border-radius: 30px !important; font-family: var(--font_dm) !important; font-weight: 700 !important; padding: 13px 26px !important; color: #fff !important; width: 100%; }
.fluentform .ff-btn-submit:hover { background: var(--ics-gl) !important; }

/* ══════════════ Blog / Archivo ══════════════ */
.ics-blog-header { background: var(--ics-ink); padding: 72px 40px 56px; }
.ics-blog-header h1 { color: #fff; font-size: clamp(28px,4vw,48px); margin-top: 8px; }
.ics-blog-list { padding: 56px 40px 96px; }
.ics-blog-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ics-blog-card { display: block; color: inherit; }
.ics-blog-thumb { border-radius: 12px; overflow: hidden; margin-bottom: 14px; aspect-ratio: 16/10; }
.ics-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ics-blog-card h3 { font-size: 17px; margin: 12px 0 6px; }
.ics-blog-card p { font-size: 13px; margin-bottom: 10px; }
.ics-doc-flag { font-family: var(--font_yantramanv); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ics-mist); margin-left: 8px; }
.ics-pagination { max-width: 1280px; margin: 40px auto 0; display: flex; justify-content: space-between; font-family: var(--font_yantramanv); font-size: 12px; }
.ics-pagination a, .ics-pagination span { color: var(--ics-green); }
@media (max-width: 1000px) { .ics-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ics-blog-grid { grid-template-columns: 1fr; } }

/* ══════════════ Post individual ══════════════ */
.ics-post-header { background: var(--ics-ink); padding: 72px 40px 40px; }
.ics-post-header .wrap { max-width: 780px; margin: 0 auto; }
.ics-post-header h1 { color: #fff; font-size: clamp(28px,4vw,44px); margin: 14px 0; }
.ics-post-meta { display: flex; gap: 10px; align-items: center; color: var(--ics-mist); margin-bottom: 18px; }
.ics-post-doc { margin-top: 8px; }
.ics-download-btn::after { content: '⬇'; }
.ics-post-cover { max-width: 900px; margin: -24px auto 0; border-radius: 18px; overflow: hidden; }
.ics-post-cover img { width: 100%; display: block; }
.ics-post-content { padding: 48px 40px 24px; }
.ics-post-content .wrap { max-width: 720px; margin: 0 auto; }
.ics-post-content p { font-size: 16px; margin-bottom: 18px; }
.ics-post-content h2 { font-size: 26px; margin-top: 40px; }
.ics-post-content h3 { font-size: 19px; margin-top: 28px; text-transform: none; letter-spacing: 0; color: var(--ics-ink); font-weight: 800; font-family: var(--font_syne); }
.ics-post-content blockquote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; border-left: 3px solid var(--ics-green); padding-left: 20px; margin: 24px 0; color: var(--ics-ink); }
.ics-post-content img { max-width: 100%; border-radius: 12px; margin: 12px 0; }
.ics-post-content ul, .ics-post-content ol { margin: 0 0 18px 22px; }
.ics-post-content a { color: var(--ics-green); text-decoration: underline; }
.ics-post-nav { padding: 32px 40px 80px; border-top: 1px solid var(--ics-rule); margin-top: 24px; }
.ics-post-nav .wrap { max-width: 720px; margin: 0 auto; display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
.ics-post-nav a { color: var(--ics-ink); }