/* ============================================================
   Camino al Éxito — Revista digital
   Portal editorial de economía y emprendimiento (Centroamérica)
   Mobile-first · Paleta: azul marino + dorado + terracota
   ============================================================ */

:root{
  --navy:#0e2038;
  --navy-2:#16304f;
  --navy-3:#1d3c63;
  --gold:#c9a132;
  --gold-soft:#e3c565;
  --terra:#c26744;
  --steel:#3f7cac;
  --sage:#6f9273;
  --paper:#faf8f3;
  --white:#ffffff;
  --ink:#22262c;
  --gray:#5c6470;
  --line:#e4dfd4;
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 2px 14px rgba(14,32,56,.10);
  --radius:6px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:1rem;line-height:1.65;color:var(--ink);background:var(--paper)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--navy-3);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--terra)}
ul,ol{list-style-position:inside}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--navy);padding:.5rem 1rem;z-index:200}
.skip-link:focus{left:0}

/* ---------- Barra superior ---------- */
.topbar{background:var(--navy);color:#cfd8e3;font-size:.78rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:32px;gap:1rem}
.topbar .tb-claim{color:var(--gold-soft);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Cabecera / masthead ---------- */
.masthead{background:var(--white);border-bottom:1px solid var(--line)}
.masthead .container{display:flex;align-items:center;justify-content:space-between;padding-top:.9rem;padding-bottom:.9rem;gap:1rem}
.logo{display:flex;flex-direction:column;line-height:1.1}
.logo-main{font-family:var(--serif);font-weight:700;font-size:1.55rem;color:var(--navy);letter-spacing:.02em}
.logo-main em{font-style:normal;color:var(--gold)}
.logo-sub{font-size:.62rem;letter-spacing:.28em;color:var(--gray);text-transform:uppercase;margin-top:.15rem}
.masthead-note{display:none;font-size:.72rem;color:var(--gray);max-width:300px;text-align:right;line-height:1.4}

/* ---------- Navegación ---------- */
.mainnav{background:var(--navy-2);position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.mainnav .container{display:flex;align-items:center;justify-content:space-between}
.nav-toggle{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;color:#fff;font-size:.9rem;padding:.7rem 0;cursor:pointer;font-family:var(--sans)}
.nav-toggle .bars{display:inline-block;width:20px;height:2px;background:var(--gold);position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--gold)}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-list{list-style:none;display:none;flex-direction:column;width:100%;padding-bottom:.5rem}
.nav-list.open{display:flex}
.nav-list a{display:block;color:#e8edf4;padding:.55rem .25rem;font-size:.92rem;letter-spacing:.03em;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-list a:hover{color:var(--gold-soft)}
.nav-list a.active{color:var(--gold);font-weight:600}
.nav-wrap{width:100%}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 70%,#25507f 100%);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(201,161,50,.28),transparent 70%)}
.hero .container{position:relative;z-index:2;display:grid;gap:1.5rem;padding-top:2.2rem;padding-bottom:2.4rem}
.hero-kicker{color:var(--gold-soft);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700}
.hero h1,.hero .hero-title{font-family:var(--serif);font-size:1.7rem;line-height:1.25;margin:.5rem 0 .8rem}
.hero .hero-title a{color:#fff}
.hero .hero-title a:hover{color:var(--gold-soft)}
.hero p{color:#c9d4e2;font-size:.98rem;max-width:56ch}
.hero-meta{font-size:.8rem;color:#9fb0c6;margin-top:.7rem}
.hero-media{border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.btn{display:inline-block;padding:.65rem 1.5rem;border-radius:4px;font-weight:600;font-size:.9rem;letter-spacing:.03em;border:2px solid transparent;cursor:pointer;font-family:var(--sans)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-soft);color:var(--navy)}
.btn-outline{border-color:var(--gold);color:var(--gold-soft);background:transparent}
.btn-outline:hover{background:var(--gold);color:var(--navy)}
.btn-navy{background:var(--navy-2);color:#fff}
.btn-navy:hover{background:var(--navy-3);color:#fff}

/* ---------- Secciones ---------- */
.section{padding:2.4rem 0}
.section-alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;border-bottom:3px solid var(--navy);padding-bottom:.5rem}
.section-head h2{font-family:var(--serif);font-size:1.35rem;color:var(--navy)}
.section-head h2 span{color:var(--gold)}
.section-head .more{font-size:.82rem;font-weight:600;color:var(--terra);white-space:nowrap}

/* ---------- Grid de tarjetas ---------- */
.grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-media{aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-title{font-family:var(--serif);font-size:1.08rem;line-height:1.35}
.card-title a{color:var(--navy)}
.card-title a:hover{color:var(--terra)}
.card-excerpt{font-size:.88rem;color:var(--gray);flex:1}
.card-meta{font-size:.75rem;color:var(--gray);border-top:1px dashed var(--line);padding-top:.6rem;display:flex;flex-wrap:wrap;gap:.35rem .8rem}
.card-meta strong{color:var(--navy-3);font-weight:600}

/* ---------- Badges de categoría ---------- */
.badge{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.22rem .6rem;border-radius:3px;color:#fff;width:fit-content}
.badge-economia{background:var(--gold);color:var(--navy)}
.badge-emprendimiento{background:var(--terra)}
.badge-tecnologia{background:var(--steel)}
.badge-estilo-de-vida{background:var(--sage)}

/* ---------- Franja aviso nombre ---------- */
.notice-name{background:var(--navy);color:#dfe6ef;border-left:6px solid var(--gold);border-radius:var(--radius);padding:1.3rem 1.4rem;font-size:.92rem}
.notice-name strong{color:var(--gold-soft)}
.notice-name a{color:var(--gold-soft);text-decoration:underline}

/* ---------- Newsletter / CTA ---------- */
.cta-box{background:linear-gradient(120deg,var(--navy-2),var(--navy));color:#fff;border-radius:var(--radius);padding:1.8rem 1.5rem;text-align:center}
.cta-box h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:.5rem}
.cta-box p{color:#c9d4e2;font-size:.9rem;max-width:60ch;margin:0 auto 1.1rem}

/* ---------- Migas de pan ---------- */
.breadcrumbs{font-size:.78rem;color:var(--gray);padding:1rem 0 0}
.breadcrumbs a{color:var(--terra)}
.breadcrumbs span{margin:0 .35rem;color:var(--line)}

/* ---------- Artículo ---------- */
.article-wrap{max-width:780px;margin:0 auto;padding:1.2rem 1rem 3rem}
.article-head{padding:1rem 0 1.2rem;border-bottom:3px double var(--line);margin-bottom:1.4rem}
.article-head h1{font-family:var(--serif);font-size:1.75rem;line-height:1.25;color:var(--navy);margin:.7rem 0 .9rem}
.article-standfirst{font-size:1.05rem;color:var(--gray);font-style:italic;line-height:1.6}
.article-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.8rem;color:var(--gray);margin-top:1rem}
.article-meta strong{color:var(--navy-3)}
.article-figure{margin:0 0 1.6rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.article-figure figcaption{font-size:.75rem;color:var(--gray);background:var(--white);padding:.5rem .9rem;border-top:2px solid var(--gold)}
.article-body{font-size:1.02rem}
.article-body p{margin-bottom:1.15rem}
.article-body h2{font-family:var(--serif);color:var(--navy);font-size:1.32rem;margin:1.9rem 0 .8rem;padding-left:.75rem;border-left:4px solid var(--gold)}
.article-body h3{font-family:var(--serif);color:var(--navy-3);font-size:1.1rem;margin:1.4rem 0 .6rem}
.article-body ul,.article-body ol{margin:0 0 1.15rem 1rem}
.article-body li{margin-bottom:.45rem}
.article-body a{color:var(--terra);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--navy)}
.article-body blockquote{border-left:4px solid var(--terra);background:var(--white);padding:1rem 1.2rem;margin:1.4rem 0;font-family:var(--serif);font-style:italic;color:var(--navy-2);font-size:1.05rem}
.article-body strong{color:var(--navy-2)}

/* ---------- Cajas: disclaimer y autor ---------- */
.disclaimer-box{background:#fdf6e4;border:1px solid var(--gold);border-radius:var(--radius);padding:1rem 1.2rem;font-size:.82rem;color:#6b5a1e;margin:2rem 0}
.disclaimer-box strong{color:#8a6d14}
.author-box{display:flex;gap:1rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin:1.5rem 0;align-items:flex-start}
.author-avatar{flex:0 0 62px;width:62px;height:62px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem;font-weight:700}
.author-info h4{font-family:var(--serif);color:var(--navy);font-size:1rem;margin-bottom:.25rem}
.author-info p{font-size:.83rem;color:var(--gray);line-height:1.5}
.related{margin-top:2.2rem}
.related h3{font-family:var(--serif);color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:.4rem;margin-bottom:1rem;font-size:1.15rem}

/* ---------- Páginas genéricas / legales ---------- */
.page-head{background:var(--navy);color:#fff;padding:2.2rem 0}
.page-head h1{font-family:var(--serif);font-size:1.7rem}
.page-head p{color:#c9d4e2;font-size:.95rem;max-width:70ch;margin-top:.5rem}
.page-body{max-width:820px;margin:0 auto;padding:2rem 1rem 3rem;font-size:.97rem}
.page-body h2{font-family:var(--serif);color:var(--navy);font-size:1.28rem;margin:1.8rem 0 .7rem;padding-left:.7rem;border-left:4px solid var(--gold)}
.page-body h3{font-family:var(--serif);color:var(--navy-3);font-size:1.05rem;margin:1.3rem 0 .5rem}
.page-body p{margin-bottom:1rem}
.page-body ul,.page-body ol{margin:0 0 1rem 1rem}
.page-body li{margin-bottom:.4rem}
.page-body a{color:var(--terra);text-decoration:underline}
.page-body table{width:100%;border-collapse:collapse;font-size:.85rem;margin:1rem 0}
.page-body th,.page-body td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
.page-body th{background:var(--navy);color:#fff;font-weight:600}
.page-body tr:nth-child(even) td{background:var(--white)}
.updated-note{font-size:.78rem;color:var(--gray);font-style:italic;margin-bottom:1.4rem}

/* ---------- Equipo ---------- */
.team-grid{display:grid;gap:1.2rem;grid-template-columns:1fr;margin:1.2rem 0}
.team-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;display:flex;gap:1rem;align-items:flex-start}
.team-card .author-avatar{flex:0 0 56px;width:56px;height:56px;font-size:1.3rem}
.team-card h4{font-family:var(--serif);color:var(--navy);margin-bottom:.15rem}
.team-card .role{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--terra);font-weight:700;display:block;margin-bottom:.4rem}
.team-card p{font-size:.84rem;color:var(--gray);margin:0}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;gap:2rem;grid-template-columns:1fr;max-width:1000px;margin:0 auto;padding:2rem 1rem 3rem}
.contact-info h2,.contact-form-wrap h2{font-family:var(--serif);color:var(--navy);font-size:1.3rem;margin-bottom:1rem;border-bottom:2px solid var(--gold);padding-bottom:.4rem}
.contact-item{margin-bottom:1.1rem;font-size:.92rem}
.contact-item strong{display:block;color:var(--navy-2);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.15rem}
.contact-item a{color:var(--terra)}
.form{display:grid;gap:1rem}
.form label{font-size:.82rem;font-weight:600;color:var(--navy-2);display:block;margin-bottom:.3rem}
.form input,.form select,.form textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:4px;font-family:var(--sans);font-size:.92rem;background:var(--white);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.form textarea{min-height:140px;resize:vertical}
.form .check{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--gray)}
.form .check input{width:auto;margin-top:.2rem}
.form-note{font-size:.75rem;color:var(--gray)}
.form-status{font-size:.85rem;font-weight:600}
.form-status.ok{color:#2e7d46}
.form-status.error{color:#b3402a}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:4rem 1rem 5rem;max-width:640px;margin:0 auto}
.notfound .code{font-family:var(--serif);font-size:5.5rem;font-weight:700;color:var(--navy);line-height:1}
.notfound .code span{color:var(--gold)}
.notfound h1{font-family:var(--serif);color:var(--navy-2);font-size:1.4rem;margin:.8rem 0}
.notfound p{color:var(--gray);margin-bottom:1.6rem}

/* ---------- Pie de página ---------- */
.footer{background:var(--navy);color:#b9c5d4;margin-top:3rem;font-size:.86rem}
.footer a{color:#d7dfe9}
.footer a:hover{color:var(--gold-soft)}
.footer-main{display:grid;gap:2rem;grid-template-columns:1fr;padding:2.5rem 0 2rem}
.footer h4{color:#fff;font-family:var(--serif);font-size:1rem;margin-bottom:.8rem;border-bottom:1px solid rgba(201,161,50,.4);padding-bottom:.4rem}
.footer ul{list-style:none}
.footer li{margin-bottom:.45rem}
.footer .f-brand .logo-main{color:#fff;font-size:1.25rem}
.footer .f-brand p{margin-top:.7rem;font-size:.82rem;line-height:1.6}
.footer-disclaimer{border-top:1px solid rgba(255,255,255,.12);padding:1.2rem 0;font-size:.74rem;color:#8fa0b5;line-height:1.6}
.footer-disclaimer strong{color:var(--gold-soft)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:1rem 0;font-size:.74rem;color:#8fa0b5}
.footer-bottom .container{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center}
.footer-bottom a{color:#aab8c9}

/* ---------- Aviso de cookies ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--navy-2);color:#dfe6ef;box-shadow:0 -4px 20px rgba(0,0,0,.3);padding:1.1rem 0;display:none}
.cookie-banner.visible{display:block}
.cookie-banner .container{display:flex;flex-direction:column;gap:.9rem}
.cookie-banner p{font-size:.82rem;line-height:1.55;margin:0}
.cookie-banner a{color:var(--gold-soft);text-decoration:underline}
.cookie-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.cookie-actions .btn{padding:.5rem 1.2rem;font-size:.82rem}

/* ============================================================
   Responsive ≥ 640px
   ============================================================ */
@media (min-width:640px){
  .grid-2,.grid{grid-template-columns:repeat(2,1fr)}
  .grid-1{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .cookie-banner .container{flex-direction:row;align-items:center;justify-content:space-between}
  .hero h1,.hero .hero-title{font-size:2.05rem}
  .article-head h1{font-size:2.1rem}
}

/* ============================================================
   Responsive ≥ 900px
   ============================================================ */
@media (min-width:900px){
  .nav-toggle{display:none}
  .nav-list{display:flex!important;flex-direction:row;width:auto;padding:0}
  .nav-list a{padding:.85rem 1rem;border-bottom:3px solid transparent}
  .nav-list a.active,.nav-list a:hover{border-bottom-color:var(--gold);color:var(--gold-soft)}
  .nav-wrap{width:auto}
  .grid-3,.grid{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-1{grid-template-columns:1fr}
  .hero .container{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:3rem;padding-bottom:3.2rem}
  .masthead-note{display:block}
  .footer-main{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
  .contact-grid{grid-template-columns:.8fr 1.2fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Impresión ---------- */
@media print{
  .topbar,.mainnav,.footer,.cookie-banner,.cta-box,.related{display:none}
  body{background:#fff;color:#000}
}