﻿/* =====================================================================
   BLOG casasweb - plantillas de la página del artículo
   Se usa desde casasweb.com.uy/blog/blog.css en todos los sitios.
   Personalizar en cada sitio, por ejemplo:
     .cwb-art { --cwb-acento:#b5121b; --cwb-fuente-titulos:'Playfair Display',serif; }
   Hereda la tipografía del sitio donde se inserta.
   ===================================================================== */
.cwb-art,.cwb-lista{
  --cwb-acento:#1f6f8b;
  --cwb-texto:#1f2328;
  --cwb-suave:#5f6b76;
  --cwb-borde:#e3e7eb;
  --cwb-fondo2:#f3f5f7;
  --cwb-radio:10px;
  --cwb-ancho:760px;
  --cwb-fuente-titulos:inherit;
  color:var(--cwb-texto);line-height:1.6;box-sizing:border-box;
  margin:0 auto;padding:24px 16px 48px;
}
.cwb-art *,.cwb-art *::before,.cwb-art *::after,.cwb-lista *{box-sizing:border-box}
.cwb-art{max-width:var(--cwb-ancho)}
.cwb-art img{display:block;width:100%;height:auto}
.cwb-art figure{margin:0}
.cwb-art a{color:inherit}
.cwb-volver{display:inline-block;font-size:.9rem;color:var(--cwb-suave) !important;text-decoration:none;margin-bottom:20px}
.cwb-volver:hover{color:var(--cwb-acento) !important}

/* ---------- Cabecera (título, fecha, copete) ---------- */
.cwb-cab{margin-bottom:26px}
.cwb-fecha{display:block;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cwb-suave);margin-bottom:8px}
.cwb-titulo{font-family:var(--cwb-fuente-titulos);font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.15;margin:0 0 4px;color:var(--cwb-texto)}
.cwb-copete{font-size:1.18rem;line-height:1.5;color:var(--cwb-suave);margin:14px 0 26px}
.cwb-cab .cwb-copete{margin-bottom:0}

/* ---------- Texto ---------- */
.cwb-texto{font-size:1.07rem;line-height:1.75}
.cwb-texto p{margin:0 0 1.2em}

/* ---------- foto: grande, a su tamaño real (máx. 500px) y centrada ---------- */
.cwb-g{display:block;overflow:hidden;cursor:zoom-in;text-decoration:none}
.cwb-g img{transition:transform .35s}
.cwb-g:hover img{transform:scale(1.03)}
.cwb-foto{margin:0 0 28px !important;text-align:center}
.cwb-foto .cwb-g{display:inline-block;border-radius:var(--cwb-radio);max-width:100%}
.cwb-foto img{width:auto;max-width:100%}
.cwb-epigrafe{font-size:.85rem;color:var(--cwb-suave);margin-top:8px}

/* ---------- fotos: grilla chica ---------- */
.cwb-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:30px 0 0}
.cwb-fotos .cwb-g{aspect-ratio:1/1;border-radius:6px}
.cwb-fotos img{height:100%;object-fit:cover}

/* ---------- fotos-grandes ---------- */
.cwb-fotos-grandes{display:flex;flex-direction:column;gap:18px}
.cwb-fotos-grandes .cwb-foto{margin:0 !important}

/* ---------- portada[...]: foto de fondo con contenido encima ---------- */
.cwb-hero{position:relative;border-radius:var(--cwb-radio);overflow:hidden;background:#20262c;min-height:340px;display:flex;align-items:flex-end}
.cwb-hero-img{position:absolute;inset:0}
.cwb-hero-img img{height:100%;object-fit:cover}
.cwb-hero .cwb-cab{position:relative;z-index:1;width:100%;margin:0;padding:110px 34px 30px;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0))}
.cwb-hero .cwb-titulo{color:#fff}
.cwb-hero .cwb-fecha{color:rgba(255,255,255,.8)}
.cwb-hero .cwb-copete{color:rgba(255,255,255,.92)}
.cwb-hero + .cwb-epigrafe{margin:8px 0 0}
.cwb-hero ~ .cwb-texto,.cwb-hero ~ .cwb-epigrafe + .cwb-texto{margin-top:30px}

/* ---------- columnas[...;...] ---------- */
.cwb-cols{display:grid;gap:36px;align-items:start}
.cwb-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cwb-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cwb-col > .cwb-texto{position:sticky;top:20px}

/* ---------- intercalado ---------- */
.cwb-inter{width:46%;margin:6px 0 18px !important}
.cwb-inter.izq{float:left;margin-right:26px !important}
.cwb-inter.der{float:right;margin-left:26px !important}
.cwb-inter .cwb-g{border-radius:var(--cwb-radio)}
.cwb-limpiar{clear:both}

/* ---------- mosaico ---------- */
.cwb-mosaico{display:grid;gap:8px;margin:0 0 34px;border-radius:var(--cwb-radio);overflow:hidden;height:min(460px,60vw)}
.cwb-mos img{height:100%;object-fit:cover}
.cwb-m1{grid-template-columns:1fr}
.cwb-m2{grid-template-columns:3fr 2fr}
.cwb-m3,.cwb-m4,.cwb-m5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.cwb-m3 .cwb-mos:first-child,.cwb-m4 .cwb-mos:first-child,.cwb-m5 .cwb-mos:first-child{grid-row:1/3}
.cwb-m3 .cwb-mos:nth-child(2){grid-column:2/4}
.cwb-m3 .cwb-mos:nth-child(3){grid-column:2/4}
.cwb-m4 .cwb-mos:nth-child(4){grid-column:2/4}

/* ---------- tags ---------- */
.cwb-tags{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.cwb-tags li{font-size:.8rem;padding:5px 12px;border-radius:999px;background:var(--cwb-fondo2);color:var(--cwb-suave)}

/* Los estilos propios de cada plantilla están en la tabla blog_plantillas (columna css) */

/* =====================================================================
   Listado de EJEMPLO (cada sitio puede hacer el suyo)
   ===================================================================== */
.cwb-lista{max-width:900px}
.cwb-lista a{color:inherit;text-decoration:none}
.cwb-item{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--cwb-borde)}
.cwb-item-img{display:block;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:var(--cwb-fondo2)}
.cwb-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.cwb-item h2{font-family:var(--cwb-fuente-titulos);font-size:1.35rem;margin:0;line-height:1.25}
.cwb-item h2 a:hover{color:var(--cwb-acento)}
.cwb-item p{color:var(--cwb-suave);margin:8px 0 0}
.cwb-vacio{color:var(--cwb-suave);text-align:center;padding:40px 0}
.cwb-pag{display:flex;gap:6px;justify-content:center;margin-top:30px}
.cwb-pag a,.cwb-pag span{padding:6px 13px;border:1px solid var(--cwb-borde);border-radius:999px}
.cwb-pag span{background:var(--cwb-acento);border-color:var(--cwb-acento);color:#fff}

/* ---------- Visor de fotos ---------- */
.cwb-visor{position:fixed;inset:0;z-index:9999;background:rgba(10,12,14,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.cwb-visor.abierto{display:flex}
.cwb-visor img{max-width:100%;max-height:82vh;border-radius:4px}
.cwb-visor p{color:#ddd;margin:12px 0 0;font-size:.9rem;text-align:center}
.cwb-visor button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;padding:10px 18px;line-height:1}
.cwb-visor .cwb-cerrar{top:6px;right:6px}
.cwb-visor .cwb-ant{left:4px;top:50%;transform:translateY(-50%)}
.cwb-visor .cwb-sig{right:4px;top:50%;transform:translateY(-50%)}

/* ---------- Celulares ---------- */
@media (max-width:760px){
  .cwb-hero{min-height:0;display:block}
  .cwb-hero-img{position:static}
  .cwb-hero-img img{height:auto}
  .cwb-hero .cwb-cab{padding:20px;background:#20262c}
  .cwb-cols,.cwb-cols-2,.cwb-cols-3{grid-template-columns:1fr !important;gap:24px}
  .cwb-col > .cwb-texto{position:static}
  .cwb-inter,.cwb-inter.izq,.cwb-inter.der{float:none;width:100%;margin:6px 0 20px !important}
  .cwb-mosaico{height:auto;grid-template-columns:1fr 1fr !important;grid-template-rows:none !important}
  .cwb-mosaico .cwb-mos{grid-row:auto !important;grid-column:auto !important;aspect-ratio:1/1}
  .cwb-mosaico .cwb-mos:first-child{grid-column:1/3 !important;aspect-ratio:4/3}
  .cwb-item{grid-template-columns:1fr;gap:12px}
}
