/* ==========================================================
   estilos.css — diseño común de charrymosquera.com.co
   Todas las páginas enlazan este archivo. Un cambio aquí se
   aplica en todo el sitio.
   ========================================================== */

:root{
  --ink:#12203D;        /* azul tinta: textos y fondos oscuros */
  --ink-2:#1B2B4D;      /* azul para recuadros sobre fondo oscuro */
  --ink-soft:#3D4A66;   /* texto secundario */
  --paper:#EEEAE0;      /* fondo general */
  --band:#E6E1D4;       /* fondo alterno de secciones */
  --raised:#F7F4EC;     /* fondo de recuadros */
  --gold:#A9812E;       /* acento dorado */
  --gold-l:#C9AD6E;     /* dorado claro sobre fondo oscuro */
  --brick:#8C2F39;      /* vinotinto */
  --green:#2F5A3A;
  --grey:#6B6558;
  --on-dark:#C9D0DE;    /* texto secundario sobre fondo oscuro */
  --line:rgba(18,32,61,.14);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --ancho:1216px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--brick); text-decoration:none}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.wrap{max-width:var(--ancho); margin:0 auto; padding:0 28px}
.sr{position:absolute; left:-9999px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important} }

/* ---------- Encabezado ---------- */
.sitio-header{position:sticky; top:0; z-index:50; background:var(--ink); color:#fff}
.sitio-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px}
.marca{display:flex; align-items:center; gap:12px; color:#fff; font:500 17px var(--mono); white-space:nowrap}
.marca:hover{color:#fff}
.marca span.sello{width:36px; height:36px; border-radius:50%; border:1.5px solid var(--gold-l); display:grid; place-items:center; font-size:10.5px; color:var(--gold-l)}
.menu{display:flex; gap:16px; font-size:14.5px}
.menu a{white-space:nowrap}
.menu a{color:#E8E4DA}
.menu a:hover,.menu a[aria-current="page"]{color:var(--gold-l)}
.btn-menu{display:none; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; height:42px; padding:0 14px; border-radius:2px; font:500 14px var(--sans); cursor:pointer}

/* ---------- Ticker ---------- */
.ticker{background:var(--raised); border-top:3px solid var(--gold); border-bottom:1px solid var(--line); overflow:hidden}
.ticker .wrap{display:flex; align-items:center; gap:18px; height:50px}
.ticker-etq{flex-shrink:0; background:var(--brick); color:#fff; font:500 11.5px var(--mono); letter-spacing:.14em; padding:5px 10px; border-radius:2px}
.ticker-ventana{overflow:hidden; flex:1; mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ticker-cinta{display:inline-flex; gap:26px; white-space:nowrap; font:14px var(--mono); animation:cinta 90s linear infinite}
.ticker-ventana:hover .ticker-cinta{animation-play-state:paused}
.ticker-cinta a{color:var(--ink)}
.ticker-cinta a:hover{color:var(--brick)}
.ticker-cinta .sep{color:var(--gold)}
@keyframes cinta{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:2px; font:600 15px var(--sans); border:1.5px solid transparent; cursor:pointer; text-align:center}
.btn-oscuro{background:var(--ink); color:#fff}
.btn-oscuro:hover{background:var(--brick); color:#fff}
.btn-oro{background:var(--gold); color:var(--ink)}
.btn-oro:hover{background:var(--gold-l); color:var(--ink)}
.btn-linea{border-color:var(--ink); color:var(--ink)}
.btn-linea:hover{background:var(--ink); color:#fff}
.enlace{font-weight:600; font-size:15px}

/* ---------- Secciones ---------- */
.seccion{padding:88px 0}
.seccion.alterna{background:var(--band)}
.seccion.oscura{background:var(--ink); color:#fff}
.seccion-cab{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:40px; flex-wrap:wrap}
.oscura .seccion-cab{border-color:rgba(201,173,110,.45)}
.antetitulo{display:flex; align-items:center; gap:10px; font:500 12.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--brick); margin-bottom:6px}
.oscura .antetitulo{color:var(--gold-l)}
.seccion h2{margin:0; font:700 clamp(30px,3.6vw,44px)/1.1 var(--serif)}
.seccion-intro{margin:10px 0 0; max-width:720px; color:var(--ink-soft)}
.oscura .seccion-intro{color:var(--on-dark)}

.rejilla{display:grid; gap:28px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- Recuadros ---------- */
.tarjeta{background:var(--raised); border:1px solid var(--line); border-radius:3px; padding:30px; display:flex; flex-direction:column; gap:12px}
.tarjeta.filete{border-top:4px solid var(--gold)}
.tarjeta.filete-tinta{border-top:4px solid var(--ink)}
.tarjeta.oscura{background:var(--ink); color:#fff; border-color:var(--ink)}
.tarjeta h3{margin:0; font:600 24px/1.22 var(--serif)}
.tarjeta p{margin:0; font-size:16px; color:var(--ink-soft)}
.tarjeta.oscura p,.tarjeta.oscura li{color:var(--on-dark)}
.tarjeta .meta{font:500 12.5px var(--mono); color:var(--grey); letter-spacing:.02em}
.tarjeta .meta.rojo{color:var(--brick)}
.tarjeta.oscura .meta{color:var(--gold-l)}
.tarjeta .pie{margin-top:auto; padding-top:4px}
.chequeos{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:15.5px; color:var(--ink-soft)}
.chequeos li{display:flex; gap:10px}
.chequeos li::before{content:""; flex-shrink:0; width:16px; height:16px; margin-top:4px; background:var(--brick); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
.tarjeta.oscura .chequeos li::before{background:var(--gold-l)}
.etiquetas{display:flex; flex-wrap:wrap; gap:8px}
.etiquetas span{font:500 12px var(--mono); border:1px solid var(--line); padding:5px 10px; border-radius:2px}

/* ---------- Pie de página ---------- */
.sitio-pie{background:#0C172E; color:var(--on-dark); padding:48px 0; font-size:14.5px}
.sitio-pie .wrap{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap}
.sitio-pie strong{display:block; color:#fff; font:500 16px var(--mono); margin-bottom:6px}
.sitio-pie a{color:var(--on-dark)}
.sitio-pie a:hover{color:var(--gold-l)}
.sitio-pie .cols{display:flex; gap:56px; flex-wrap:wrap}
.sitio-pie .col{display:flex; flex-direction:column; gap:6px}
.sitio-pie .col b{font:500 11.5px var(--mono); letter-spacing:.14em; color:var(--gold-l); margin-bottom:4px}
.sitio-pie .aviso{flex-basis:100%; border-top:1px solid rgba(255,255,255,.1); padding-top:18px; font-size:13px; color:#8E97AB}

/* ---------- Adaptación a pantallas ---------- */
@media (max-width:1080px){
  .menu{display:none; position:absolute; top:72px; left:0; right:0; background:var(--ink); flex-direction:column; gap:0; padding:8px 28px 20px; border-top:1px solid rgba(255,255,255,.1)}
  .menu.abierto{display:flex}
  .menu a{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:16px}
  .btn-menu{display:inline-flex; align-items:center}
  .sitio-header .btn-cta{display:none}
  .r3,.r4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  body{font-size:16px}
  .seccion{padding:60px 0}
  .r2,.r3,.r4{grid-template-columns:1fr}
  .tarjeta{padding:24px}
  .wrap{padding:0 20px}
}
@media print{
  .sitio-header,.ticker,.sitio-pie{display:none}
  body{background:#fff}
}


/* ---------- Páginas de cuenta, suscripción, chat (charrymosquera.com.co) ---------- */
.pagina{padding:56px 0 80px}
.pagina .angosto{max-width:560px}
.pagina h1{margin:0 0 8px; font:700 clamp(30px,3.6vw,42px)/1.12 var(--serif)}
.ayuda{color:var(--ink-soft); font-size:15.5px; margin:0 0 14px}
.panel{background:var(--raised); border:1px solid var(--line); border-radius:3px; padding:28px}
.pestanas{display:flex; gap:6px; margin-bottom:18px}
.pestanas button{flex:1; font:600 14px var(--sans); padding:10px; border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--ink-soft); cursor:pointer}
.pestanas button.activa{background:var(--ink); color:#fff; border-color:var(--ink)}
label{display:block; font:600 13.5px var(--sans); margin:14px 0 6px; color:var(--ink-soft)}
input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{width:100%; font:16px var(--sans); padding:11px 12px; border:1px solid rgba(18,32,61,.25); border-radius:2px; background:#fff; color:var(--ink)}
textarea{resize:vertical}
.check{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:14.5px; color:var(--ink)}
.check input{margin-top:4px}
.acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; align-items:center}
.mensaje{border-radius:2px; padding:10px 12px; font-size:14.5px; margin-top:14px}
.mensaje.error{background:#F0DEDD; color:var(--brick)}
.mensaje.ok{background:#E4EAE0; color:var(--green)}
.dato{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15.5px}
.dato span:first-child{color:var(--grey)}
.borrador{background:#F6EBC8; border:1px solid var(--gold-l); padding:10px 12px; font-size:14px}
mark{background:#F6EBC8}
[hidden]{display:none !important}
.btn[disabled]{opacity:.6; cursor:wait}