/* ============================================================
   caynet-extra.css
   Complementa theme-caynet.css: define variables que el theme
   usa pero no declara (--accent, --accent-fire, --accent-agro),
   y agrega las piezas de layout necesarias para armar la home
   (grilla fija, carruseles Swiper, widgets de Datos Útiles).
   No modifica ninguna regla existente de theme-caynet.css.
   ============================================================ */

:root {
  --accent:        #00B3FD;
  --accent-fire:   #FF6B35;
  --accent-agro:   #4ADE80;
  --brand-blue:    #00B3FD;
  --brand-indigo:  #7B5CF0;
  --brand-magenta: #D911EA;
}

/* ── contenedor general de sección ───────────────────────── */
.container-page {
  max-width: 1320px;
  /*margin: 0 auto;*/
  padding: 0 1.5rem;
}
@media (max-width: 600px) { .container-page { padding: 0 1rem; } }

/* ── section-header: iconos + links como <a> dentro de span ── */
.section-header i { font-size: .95rem; }
.label-subs a { color: inherit; text-decoration: none; }
.label-subs a:hover { text-decoration: underline; }

/* ── card-body necesita flex para apilar meta/badge/título ── */
.card-body { display: flex; flex-direction: column; gap: .4rem; }
.card-meta { display: flex; align-items: center; gap: .4rem; }

/* ── FILA FIJA (sin carrusel): 3 cards ocupando el ancho ──── */
.fixed-row {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}
.fixed-row .news-card {
  max-width: none;
  width: 100%;
  flex: 1 1 0;
}
@media (max-width: 900px) {
  .fixed-row { flex-wrap: wrap; }
  .fixed-row .news-card { flex: 1 1 45%; }
}
@media (max-width: 600px) {
  .fixed-row { flex-direction: column; align-items: center; }
  .fixed-row .news-card { flex: 1 1 auto; width: 100%; }
  /* sin override de aspect-ratio: conserva el 15/19 definido en theme-caynet.css */
}

/* ── SWIPER: mantenemos el tamaño fijo de .news-card (300px) ── */
.carousel-wrap .swiper { padding: 4px 2px 8px; }
.carousel-wrap .swiper-slide {
  width: 300px;
  height: auto;
}
.carousel-wrap .swiper-slide .news-card,
.carousel-wrap .swiper-slide .agro-widget {
  width: 100%;
  max-width: none;
}
@media (max-width: 480px) {
  .carousel-wrap .swiper-slide { width: 82vw; }
}

/* ── DATOS ÚTILES: grilla de widgets ─────────────────────── */
.datos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1024px) { .datos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .datos-grid { grid-template-columns: repeat(2, 1fr); } }

.datos-widget {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  cursor: pointer;
}
.datos-widget:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-3px);
}
.datos-widget .icon-circle {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-magenta));
  color: #fff; font-size: .95rem;
  margin-bottom: .35rem;
}
.datos-widget .dw-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
}
.datos-widget .dw-value {
  font-size: 1.05rem; font-weight: 800; color: var(--text-main); line-height: 1.25;
}
.datos-widget .dw-sub { font-size: .9rem; color: var(--text-dim); }



/* Etiqueta destacada en verde con texto negro para el widget */
.dw-label-farmacia{
  background-color: var(--accent-agro, #4ADE80);
  color: #000000 !important;
  padding: 6px 4px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ── SECCION 2: 1 card grande + 4 noticias chicas a la derecha ── */
.seccion-grid-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* la card grande ocupa todo el alto disponible en vez de usar el
   aspect-ratio 15/19 fijo de .news-card, para igualar la altura
   de la columna de 4 noticias de la derecha */
.news-card--featured {
  max-width: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 520px;
}

.seccion-grid-2-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.news-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .7rem;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.news-row:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-2px);
}
.news-row-thumb {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}
.news-row-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.news-row-badge {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--badge-txt, #00B3FD);
}
.news-row-title {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .seccion-grid-2 { grid-template-columns: 1fr; }
  .news-card--featured { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 480px) {
  .news-row-thumb { width: 72px; height: 72px; }
  .news-row-title { font-size: .8rem; }
}

/* ── TECNOLOGÍA: 1 card grande + 2 cards apiladas a la derecha ── */
.tecnologia-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.tecnologia-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}
/* las 2 cards de la derecha también renuncian al aspect-ratio 15/19
   fijo: se reparten el alto disponible en partes iguales (flex:1) */
.tecnologia-side .news-card {
  max-width: none;
  width: 100%;
  aspect-ratio: auto;
  flex: 1;
  min-height: 240px;
}

@media (max-width: 900px) {
  .tecnologia-grid { grid-template-columns: 1fr; }
  .tecnologia-side .news-card { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
}

/* ── section-divider spacing consistency ─────────────────── */
.section-divider { margin:3rem 0 0rem 0}

/* ── refuerzo de legibilidad del titular sobre la imagen ─── */
.card-title {
  text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
}

/* ── ticker duplication doesn't overlap label ────────────── */
.ticker-label i { font-size: .5rem; }

/* ── footer icon sizing ───────────────────────────────────── */
.footer-socials a i { font-size: 1rem; }

/* ── hero-less top spacing tweak for first section ───────── */
main > .page-section:first-child { padding-top: 1.75rem; }