/* 1. Importación Bulma 1.0.4 */
@import "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css";

/* theme-caynet.css */

*, *::before, *::after { box-sizing: border-box; }

/* MODO OSCURO (Predeterminado de Caynet) */
html[data-theme="dark"] {
  --bg-base: linear-gradient(315deg, #2b2c2e 0%, #2b2c2e 40%, #355470 100%);
  --text-main:   #f2f2f8;
  --text-muted:  rgba(255,255,255,0.55);
  --text-dim:    rgba(255,255,255,0.30);
  --border:      rgba(255,255,255,0.07);
  --card-internal-bg: rgba(255, 255, 255, 0.02);
  --strong-color: #60a5fa;
  
  /* badge Colores individuales - Actualidad (Azul) */
  --actualidad-bg: rgba(99, 163, 248, 0.85);
  --actualidad-txt: #333;

  /* badge Colores individuales - Agro (Verde) */
  --agro-bg: rgba(74, 222, 128, 0.85);
  --agro-txt: #333;

  /* badge Colores individuales - Tech (Púrpura/Cian o el que uses) */
  --tech-bg: rgba(233, 73, 157, 0.85);
  --tech-txt: #33;
  
}

/* MODO CLARO */
html[data-theme="light"] {
  --bg-base: linear-gradient(135deg, #fbfbfb 0%, #fbfbfb 60%, #355470 100%);
  --text-main:   #1a202c; 
  --text-muted:  #4a5568;
  --text-dim:    #718096;
  --border:      rgba(0, 0, 0, 0.1);
  --card-internal-bg: rgba(0, 0, 0, 0.03);
  --strong-color: #8B75F8;

/* badge Colores individuales - Actualidad (Azul Marino) */
  --actualidad-bg: rgba(30, 64, 175, 0.1);
  --actualidad-txt: #1e40af;

  /*badge Colores individuales - Agro (Verde Bosque) */
  --agro-bg: rgba(22, 101, 52, 0.5);
  --agro-txt: #ffff00;

  /* badge Colores individuales - Tech (Púrpura Profundo) */
  --tech-bg: rgba(107, 33, 168, 0.1);
  --tech-txt: #6b21a8;
}




:root {
  --radius: 8px;
}

html, body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg-base) no-repeat !important;
  background-attachment: fixed;
  color: var(--text-main) !important;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

/* color tag strong en the_content  global  */
.entry-content strong { 
 color: var(--strong-color);
    font-weight: 700;
    letter-spacing: 0.02em; 
    transition: color 0.3s ease; /* Transición suave cuando se cambia de tema */
}

/* Efecto grano SVG de fondo (Solo visible u óptimo en modo oscuro) 
html[data-theme="dark"] body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}*/

/* Ajuste en tus tarjetas para heredar el fondo del modo 
.news-card {
  background: var(--card-internal-bg);
  border: 1px solid var(--border);
  color: var(--text-main);
}
*/	

    /* ── NAVBAR ── */
    .site-nav {
      /*background: rgba(7,7,13,0.96);*/
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      padding: 0 1.5rem;
      display: flex; align-items: center; gap: 1rem;
      height: 62px; position: sticky; top: 0; z-index: 100;
    }
    .site-logo {
      font-size: 1.3rem; font-weight: 900; letter-spacing: -.5px;
      color: var(--text-main); text-decoration: none;
      display: flex; align-items: center; gap: 9px;
    }
    .site-logo .globe {
      width: 32px; height: 32px; border-radius: 50%;
      background: conic-gradient(from 180deg, #60a5fa, #a855f7, #ec4899, #60a5fa);
      display: flex; align-items: center; justify-content: center; font-size: .85rem;
    }
    .nav-links { display: flex; gap: .1rem; margin-left: auto; }
    .nav-links a {
      color: var(--text-muted); font-size: .78rem; font-weight: 500;
      padding: .3rem .65rem; border-radius: 20px; text-decoration: none; transition: all .2s;
    }
    .nav-links a:hover { color: var(--text-main); background: var(--border); }
    .nav-search {
      width: 200px; background: rgba(255,255,255,0.06);
      border: 1px solid var(--border); border-radius: 20px;
      padding: .3rem .9rem; color: var(--text-main);
      font-size: .78rem; font-family: 'Poppins', sans-serif; outline: none;
    }
    .nav-search::placeholder { color: var(--text-dim); }
	
	
/* ==========================================================================
   BARRA NAVEGACIÓN INFERIOR (MOBILE BOTTOM NAV)
   ========================================================================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: var(--bg-card, #1e1f29);
  border-top: 1px solid var(--border-color, #2a2b3d);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 998;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
}

.bottom-nav-item {
  background: transparent;
  border: none;
  color: var(--text-muted, #a0a5ba);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  gap: 3px;
  width: 33.33%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.1s ease;
}

.bottom-nav-item i {
  font-size: 1.25rem;
}

.bottom-nav-item:active {
  transform: scale(0.95);
}

.bottom-nav-item.is-active,
.bottom-nav-item:hover {
  color: var(--color-primary, #3e8ed0);
}

/* Compensación de margen inferior para que el footer o contenido no quede tapado por la barra */
@media screen and (max-width: 768px) {
  body {
    padding-bottom: 65px;
  }
}

/* ==========================================================================
   OFF-CANVAS DRAWER (PANEL LATERAL FLOTANTE)
   ========================================================================== */
.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.offcanvas-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.offcanvas-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 82vw;
  max-width: 340px;
  height: 100vh;
  background-color: var(--bg-card, #1e1f29);
  color: var(--text-main, #ffffff);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.offcanvas-drawer.is-active {
  transform: translateX(0);
}

.offcanvas-header {
  border-bottom: 1px solid var(--border-color, #2a2b3d);
}

/* Estilos de la lista de categorías dentro del Off-Canvas */
.offcanvas-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.offcanvas-menu-list li a {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  color: var(--text-main, #e2e8f0);
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.offcanvas-menu-list li a:hover {
  background-color: var(--bg-hover, rgba(255, 255, 255, 0.05));
  color: var(--color-primary, #3e8ed0);
}	

    /* ── TICKER ── */
    .ticker-bar {
      background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 20%);
      border-bottom: 1px solid rgba(255,107,53,.12);
	  padding: .45rem 1.5rem;
      display: flex; align-items: center; gap: .8rem; overflow: hidden;
    }
    .ticker-label {
      font-size: .66rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: 1.5px; color: var(--accent-fire);
      background: rgba(255,107,53,.1); padding: .2rem .6rem; border-radius: 4px; flex-shrink: 0;
    }
    .ticker-scroll { overflow: hidden; flex: 1; }
    .ticker-inner {
      display: flex; gap: 2.5rem;
      animation: ticker-move 30s linear infinite; white-space: nowrap;
    }
    @keyframes ticker-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .ticker-inner span { font-size: .73rem; font-weight: 500; color: var(--text-muted); }
    .ticker-inner span strong { color: var(--text-main); font-weight: 600; }

    /* ── PAGE SECTION ── */
    .page-section {
      padding: 2rem 0rem;  margin: 0 auto;
      position: relative; z-index: 1;
    }

    /* ── SECTION HEADER ── */
    .section-header {
      display: flex; align-items: center; gap: .65rem;
      margin-bottom: 1.25rem; padding-bottom: .8rem;
      border-bottom: 1px solid var(--border);
    }
    .section-header::before {
      content: ''; width: 4px; height: 22px; border-radius: 2px;
      background: var(--accent, color:#06B3F9); flex-shrink: 0; 
    }
    .label-main {
      font-size: .95rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: .5px; color: var(--text-main);
    }
    .label-subs { font-size: .95rem; font-weight: 500; color: var(--text-dim); }
    .label-subs span {color:#0BABF3; margin-left: .3rem; }
    .label-subs span::before { content: '| '; opacity: .3; }



    /* ── CAROUSEL ── */
	
	.carousel-track-outer, .swiper {
    overflow: hidden; /* Esto recorta el contenido excedente limpiamente en los bordes del bloque */
}
    .carousel-wrap { position: relative; }
    .carousel-track-outer { overflow: hidden; border-radius: var(--radius); }
    .carousel-track {
      display: flex; gap: 1rem;
      transition: transform .42s cubic-bezier(.4,0,.2,1);
      will-change: transform; align-items: stretch;
    }
    .carousel-controls {
      display: flex; align-items: center; justify-content: center;
      gap: .75rem; margin-top: .85rem;
    }
    .carousel-btn {
      width: 30px; height: 30px; border-radius: 50%;
      background: rgba(255,255,255,0.07); border: 1px solid var(--border);
      color: var(--text-muted); font-size: .85rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .2s; flex-shrink: 0;
    }
    .carousel-btn:hover { background: rgba(255,255,255,.15); color: var(--text-main); }
    .carousel-dots { display: flex; gap: .35rem; }
    .carousel-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--border); cursor: pointer; transition: all .25s;
    }
    .carousel-dot.active { background: rgba(255,255,255,.5); width: 18px; border-radius: 3px; }
	
	
	/* -- CAROUSEL SINGLE.php   -- */
	/* Por defecto en celulares el alto es de 250px 
	.swiper-slide, .single-gallery-img {
        height: 250px !important;
    }*/
	
    /* Al pasar a pantallas de computadora (Desktop), el alto sube a 400px de forma limpia 
    @media screen and (min-width: 1024px) {
        .single-gallery-img {
            height: 400px;
        }
    }
	*/

    /* ══════════════════════════════════════
       ★  NEWS CARD  —  9:16 STORY STYLE  ★
    ══════════════════════════════════════ */

    /*
      Estructura:
        .news-card                ← contenedor con aspect-ratio 9/16 + bg-image
          ::before                ← overlay gradiente (transparente arriba → negro abajo)
          .card-bg-icon           ← emoji decorativo centrado (z-index 0)
          .card-body              ← flex-column + justify-content:flex-end  (z-index 2)
            .card-meta            ← artículos · tiempo
            .card-badge           ← etiqueta de categoría
            .card-title           ← titular con keywords coloreadas
            .card-summary         ← bajada
            .card-pills           ← chips de tags
    */

/* ── NEWS CARD ─────────────────────────────────────── */
/* ── CARD: tamaño fijo por aspect-ratio ───────────── */
/*width: 340px; aspect-ratio: 17 / 21;*/   /* 340 × 420px exacto */

.news-card {
  flex-shrink: 0;
  max-width: 300px;
  aspect-ratio: 15 / 19;   /* 300 × 380px exacto */
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;             /* ← contexto para hijos absolutos    */
  cursor: pointer;
  background-color: #111120;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  transition:
    transform   .35s cubic-bezier(.4,0,.2,1),
    box-shadow  .35s cubic-bezier(.4,0,.2,1),
    border-color .3s;
}

/* ── IMAGEN de fondo: absoluta, no altera el layout ── */
.card-bg-icon {
  position: absolute;
  inset: 0;                       /* ocupa 100% del card                */
  z-index: 0;
}

.card-bg-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* recorta sin deformar               */
  object-position: center;
  display: block;
}


.news-card::before { display: none;}
.news-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.97)  0%,
    rgba(0, 0, 0, 0.88) 18%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.00) 35%,
    transparent          100%
  );
  
  /*background: linear-gradient(
    to top,
    rgba(90, 51, 153, 0.97)  0%,
    rgba(90, 51, 153, 0.88) 18%,
    rgba(90, 51, 153, 0.55) 28%,
    rgba(90, 51, 153, 0.00) 35%,
    transparent          100%
  );*/
  pointer-events: none;
}

/* ── CONTENIDO: sobre el overlay ─────────────────── */
.card-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;                     /* por encima del ::after             */
  padding: 14px 16px 18px;
}

/*
.news-card:hover {
  transform: scale(1.04);
  box-shadow: 0 24px 64px rgba(0,0,0,.75);
  border-color: rgba(255,255,255,.18);
}*/





/* ── CONTENIDO dentro de la card ───────────────────── */
.news-card__body {
  position: absolute;
  inset: auto 0 0 0;              /* ancla al borde inferior             */
  z-index: 2;
  padding: 14px 16px 18px;
}

.news-card__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  gap: 10px;
}

.news-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #ff0000; 
  margin: 0 0 6px;
}

.news-card__summary {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,.70);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

    .card-articles {
      font-size: .62rem; font-weight: 700; letter-spacing: .8px;
      text-transform: uppercase; color: rgba(255,255,255,.48);
    }
    .card-dot {
      width: 3px; height: 3px; border-radius: 50%;
      background: rgba(255,255,255,.28); flex-shrink: 0;
    }
    .card-time {
      font-size: .62rem; font-weight: 500;
      color: rgba(255,255,255,.38); margin-left: auto;
    }

    /* badge de categoría */
    .card-badge {
      display: inline-flex; align-items: center; gap: .25rem;
      font-size: .5rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .9px;
      padding: .18rem .40rem; border-radius: 3px;
	/* Colores base y texto segun theme */
    background: var(--badge-bg, rgba(255, 255, 255, 0.1));
    color: var(--badge-txt, rgba(255, 255, 255, 0.65));
      width: fit-content; margin-bottom: .05rem;
	  transition: background 0.3s ease, color 0.3s ease;
    }

/* Modificadores colores individuales por badge */
.card-badge.is-actualidad {
    --badge-bg: var(--actualidad-bg);
    --badge-txt: var(--actualidad-txt);
}

.card-badge.is-agro {
    --badge-bg: var(--agro-bg);
    --badge-txt: var(--agro-txt);
}

.card-badge.is-tech {
    --badge-bg: var(--tech-bg);
    --badge-txt: var(--tech-txt);
}

    /* titular — tipografía limpia, negrita, blanco puro */
    .card-title a {
      font-size: 1.1rem; font-weight: 500; line-height: 1.5;
      color: #ffffff;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* keywords con colores Bulma-like (sin cursiva) */
    .card-title .kw-blue  { color: #93c5fd; }
    .card-title .kw-red   { color: #fca5a5; }
    .card-title .kw-green { color: #86efac; }
    .card-title .kw-amber { color: #fde68a; }

    /* bajada */
    .card-summary {
      font-size: .72rem; font-weight: 400; line-height: 1.5;
      color: rgba(255,255,255,.52);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* chips al pie */
    .card-pills {
      display: flex; gap: .35rem; flex-wrap: wrap;
      padding-top: .45rem;
      border-top: 1px solid rgba(255,255,255,.08);
      margin-top: .05rem;
    }
    .pill {
      font-size: .6rem; font-weight: 600;
      padding: .15rem .5rem; border-radius: 20px;
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.48);
      display: flex; align-items: center; gap: .25rem;
    }

    /* ── WIDGET AGRO HOY (mismo aspect-ratio que las cards) ── */
    .agro-widget {
      flex-shrink: 0;
      border-radius: var(--radius);
      background: linear-gradient(160deg, #071410 0%, #0b1a0e 60%, #071008 100%);
      border: 1px solid rgba(74,222,128,.15);
      padding: 1.25rem 1rem;
      display: flex; flex-direction: column; gap: .8rem;
      aspect-ratio: 9 / 16;
      transition: transform .35s, box-shadow .35s;
    }
    .agro-widget:hover { transform: scale(1.03); box-shadow: 0 20px 56px rgba(0,0,0,.7); }
    .agro-widget-title  { font-size: 1.45rem; font-weight: 900; letter-spacing: -.5px; line-height: 1; color: var(--text-main); }
    .agro-widget-date   { font-size: .66rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-agro); opacity: .7; margin-top: -.4rem; }
    .agro-group         { display: flex; flex-direction: column; gap: .28rem; }
    .agro-group-label   { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); padding-bottom: .22rem; border-bottom: 1px solid var(--border); }
    .agro-row           { display: flex; justify-content: space-between; align-items: center; font-size: .77rem; }
    .agro-row .name     { color: var(--text-muted); font-weight: 500; }
    .agro-row .val      { font-weight: 700; color: var(--text-main); }
    .arr-up             { color: #4ade80; font-size: .68rem; }
    .arr-down           { color: #f87171; font-size: .68rem; }
    .dollar-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; }
    .dol-label          { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: .1rem; }
    .dol-row            { display: flex; justify-content: space-between; font-size: .7rem; }
    .dol-row .side      { color: var(--text-muted); }
    .dol-row .price     { font-weight: 700; color: var(--text-main); }

    /* ── DIVIDER ── */
    .section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
      margin: 0 1.5rem;
    }

    /* ── FOOTER ── */
    .site-footer { border-top: 1px solid var(--border); padding: 1.5rem; text-align: center; position: relative; z-index: 1; }
    .footer-socials { display: flex; justify-content: center; gap: 1.2rem; margin-bottom: .9rem; }
    .footer-socials a { color: var(--text-muted); font-size: 1rem; transition: color .2s; }
    .footer-socials a:hover { color: var(--text-main); }
    .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .8rem; margin-bottom: .6rem; }
    .footer-links a { font-size: .7rem; color: var(--text-muted); text-decoration: none; transition: color .2s; }
    .footer-links a:hover { color: var(--text-main); }
    .footer-copy { font-size: .64rem; color: var(--text-dim); }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) { .nav-links, .nav-search { display: none; } }
    @media (max-width: 600px) { .page-section { padding: 1.5rem 1rem; } }