/**
 * Conprisa · Listado del blog (nueva versión)
 *
 * Portado de «DISEÑO BLOG/assets/blog.css» con las variables base de la
 * referencia (styles.css + padding-web.css), todo colgado de body.cz-blog.
 * La referencia es de ancho fijo (1280): las reglas de tableta y móvil del
 * final son nuestras.
 *
 * Índice: variables · reset de Hello · hero (izquierda / columna / derecha) ·
 * tableta · móvil · movimiento reducido
 */

body.cz-blog{
	--bl-red:#e60612;
	--bl-ink:#07093a;
	--navy:#0a1157;
	--muted:#6b7090;
	--soft:#f3f4f8;
	--ease:cubic-bezier(.2,.8,.2,1);
	--side:max(40px, calc((100% - 1200px) / 2));
	--hh:86px;                 /* lo recalcula js/blog.js */
	--col:280px;               /* ancho de la columna de portadas */
	--step:1s;
	--step-ease:cubic-bezier(.76,0,.24,1);
	overflow-x:clip;           /* hidden volvería al body contenedor de scroll */
}

/* Hello y el Kit pintan botones, títulos y enlaces: aquí manda la referencia. */
body.cz-blog .cz-bl{font-family:Montserrat,system-ui,sans-serif;color:var(--bl-ink)}
body.cz-blog .cz-bl :where(h1,h2,p){margin:0;padding:0}
body.cz-blog .cz-bl :where(button){font:inherit;color:inherit;padding:0;border-radius:0;box-shadow:none;text-transform:none;letter-spacing:normal}
body.cz-blog .cz-bl a{text-decoration:none}

/* =========================================================
   HERO
   ========================================================= */
body.cz-blog .bl-hero{position:relative;height:calc(100vh - var(--hh));min-height:660px;background:#fff;overflow:hidden;color:var(--bl-ink);
	display:grid;grid-template-columns:minmax(0,1fr) var(--col) minmax(300px,360px);column-gap:clamp(36px,3vw,52px);padding:0 var(--side)}

/* ---------- izquierda: imagen + titular ---------- */
body.cz-blog .bl-intro{position:relative;align-self:stretch}
/* titular: relleno debajo de la imagen y contorno encima (igual que el hero de Nosotros) */
body.cz-blog .bl-ht{position:absolute;left:-6px;top:clamp(56px,9vh,96px);margin:0;font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:clamp(150px,13vw,210px);line-height:.82;letter-spacing:normal;text-transform:none;color:var(--bl-ink);pointer-events:none;
	opacity:0;transform:translateX(-60px);transition:opacity .9s ease .15s,transform 1.2s var(--ease) .15s}
body.cz-blog .bl-ht.solid{z-index:1}
body.cz-blog .bl-ht.line{z-index:2;color:transparent;-webkit-text-stroke:1.5px var(--bl-ink)}
body.cz-blog .bl-hero.go .bl-ht{opacity:1;transform:none}
body.cz-blog .bl-hero-img{position:absolute;z-index:1;right:0;bottom:2%;width:min(calc(100% + var(--side) * .7),calc((100vh - var(--hh)) * .82));height:auto;max-width:none;
	clip-path:circle(0% at 62% 58%);transition:clip-path 1.5s cubic-bezier(.65,0,.15,1) .25s}
body.cz-blog .bl-hero.go .bl-hero-img{clip-path:circle(75% at 62% 58%)}
body.cz-blog .bl-hero.go .bl-hero-img.idle{animation:cz-blFloat 8s ease-in-out infinite}
@keyframes cz-blFloat{50%{translate:0 -10px}}

/* ---------- centro: columna de portadas ---------- */
body.cz-blog .bl-col{position:relative;z-index:1}
body.cz-blog .bl-track{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:12px;will-change:transform}
body.cz-blog .bl-track.anim{transition:transform var(--step) var(--step-ease)}
body.cz-blog .bl-track.intro{transition:transform 3.4s cubic-bezier(.7,0,.12,1)}
body.cz-blog .bl-it{position:relative;flex:none;width:100%;overflow:hidden;cursor:pointer;background:var(--soft);border-radius:4px;transition:opacity .6s ease,filter .6s ease}
body.cz-blog .bl-it img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.1s var(--ease)}
body.cz-blog .bl-it:not(.cur){opacity:.4;filter:grayscale(.6)}
/* durante el recorrido de entrada todas las portadas van a color */
body.cz-blog .bl-hero:not(.ready) .bl-it{opacity:1;filter:none}
body.cz-blog .bl-it:not(.cur):hover{opacity:.75;filter:none}
body.cz-blog .bl-it.cur img{transform:scale(1.03)}
body.cz-blog .bl-it .go{position:absolute;right:14px;bottom:14px;z-index:1;width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;transform:scale(0) rotate(-45deg);transition:transform .5s var(--ease)}
body.cz-blog .bl-it .go svg{width:20px;height:20px;fill:none;stroke:var(--bl-ink);stroke-width:2}
body.cz-blog .bl-it.cur:hover .go{transform:none}

/* ---------- derecha: navegación + texto del artículo activo ---------- */
body.cz-blog .bl-info{align-self:center;position:relative;z-index:2;opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform 1s var(--ease)}
body.cz-blog .bl-hero.ready .bl-info{opacity:1;transform:none}

/* las flechas cuelgan debajo del texto: no se mueven aunque cambie su largo */
/* 48 px entre «Leer más» y las flechas (la referencia dejaba 17–26 y se veían pegados) */
body.cz-blog .bl-nav{position:absolute;left:0;top:100%;margin-top:48px;display:flex;align-items:center;gap:12px}
body.cz-blog .bl-nav button{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--bl-ink);background:#fff;display:grid;place-items:center;cursor:pointer;transition:.3s var(--ease)}
body.cz-blog .bl-nav button svg{width:18px;height:18px;fill:none;stroke:var(--bl-ink);stroke-width:2;transition:transform .3s var(--ease)}
body.cz-blog .bl-nav button:hover,body.cz-blog .bl-nav button:focus{background:var(--bl-ink)}
body.cz-blog .bl-nav button:hover svg,body.cz-blog .bl-nav button:focus svg{stroke:#fff}
body.cz-blog #blPrev:hover svg{transform:translateX(-3px)}
body.cz-blog #blNext:hover svg{transform:translateX(3px)}

/* el texto sale y entra en la misma dirección que la columna */
body.cz-blog .bl-txt > *{transition:opacity .45s ease,transform .6s var(--ease)}
body.cz-blog .bl-txt > :nth-child(2){transition-delay:.05s}
body.cz-blog .bl-txt > :nth-child(3){transition-delay:.1s}
body.cz-blog .bl-txt.out > *{opacity:0;transform:translateY(calc(var(--dir,1) * -26px));transition-delay:0s}
body.cz-blog .bl-txt.pre > *{opacity:0;transform:translateY(calc(var(--dir,1) * 26px));transition:none}
/* Bloque de texto de alto fijo. Regla: el botón y las flechas quedan SIEMPRE
   en el mismo sitio y a la misma distancia (26 px), sea cual sea el largo del
   texto (48 px, ver .bl-nav). Por eso el bloque se alinea abajo (el título y el extracto crecen
   hacia arriba) y título y extracto tienen tope de líneas, para que nunca se
   salgan del bloque ni el botón caiga sobre las flechas. Medidas: título 3
   líneas (114) + 18 + extracto 5 líneas (124) + 28 + botón 46 = 330 < 340.
   (La referencia centraba el texto en 300 px: con un extracto largo el botón
   tapaba las flechas.) */
body.cz-blog .bl-txt{height:340px;display:flex;flex-direction:column;justify-content:flex-end}
body.cz-blog .bl-txt h2{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:clamp(30px,2.4vw,38px);line-height:1;letter-spacing:.3px;text-transform:none;color:var(--bl-ink);
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
body.cz-blog .bl-txt p{margin-top:18px;font-size:15px;line-height:1.65;color:var(--muted);
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
body.cz-blog .bl-more{flex:none}
body.cz-blog .bl-more{display:flex;width:max-content;align-items:center;gap:12px;margin-top:28px;font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--bl-red);border:1.5px solid var(--bl-red);border-radius:40px;padding:13px 26px;transition:background .3s var(--ease),border-color .3s var(--ease),opacity .45s ease,transform .6s var(--ease)}
body.cz-blog .bl-more:hover,body.cz-blog .bl-more:focus{color:#fff;background:#c70510;border-color:#c70510}
body.cz-blog .bl-more i{flex:none;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .3s;animation:cz-blPulse 1.6s ease-out infinite}
/* palpito del punto */
@keyframes cz-blPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75);scale:1}30%{scale:1.25}60%{scale:1}100%{box-shadow:0 0 0 9px rgba(255,255,255,0);scale:1}}
body.cz-blog .bl-more:hover i{transform:scale(1.4)}

/* =========================================================
   TABLETA (la referencia no la trae): titular arriba, imagen a la izquierda,
   portadas y texto a la derecha.
   ========================================================= */
@media (max-width:1024px){
	body.cz-blog{--col:220px;--side:24px}
	body.cz-blog .bl-hero{grid-template-columns:minmax(0,1fr) var(--col) minmax(240px,300px);column-gap:24px;min-height:620px}
	body.cz-blog .bl-ht{font-size:clamp(110px,14vw,150px)}
	body.cz-blog .bl-txt{height:340px}
}

/* =========================================================
   MÓVIL: todo apilado. Titular + imagen, portadas en carrusel horizontal
   (la activa al centro) y debajo el texto con las flechas.
   ========================================================= */
@media (max-width:767px){
	body.cz-blog{--side:20px}
	body.cz-blog .bl-hero{display:block;height:auto;min-height:0;padding:28px var(--side) 56px}
	body.cz-blog .bl-intro{height:min(100vw,400px)}
	body.cz-blog .bl-ht{top:0;left:-3px;font-size:31vw}
	body.cz-blog .bl-hero-img{left:auto;right:-10px;bottom:0;width:86%}
	body.cz-blog .bl-col{height:min(78vw,330px);margin:28px calc(var(--side) * -1) 0;overflow:hidden}
	body.cz-blog .bl-track{top:0;bottom:0;left:0;right:auto;flex-direction:row;gap:10px}
	body.cz-blog .bl-it{height:100% !important;width:auto;aspect-ratio:2/3}
	/* sin la flecha sobre la foto: en teléfono no hay puntero y se confundía
	   con las flechas de abajo (ajustes responsive 21-10-2026, punto 12) */
	body.cz-blog .bl-it .go{display:none}
	body.cz-blog .bl-info{margin-top:22px;transform:none}
	body.cz-blog .bl-txt{height:auto;min-height:0;justify-content:flex-start}
	body.cz-blog .bl-txt h2{font-size:30px}
	body.cz-blog .bl-txt p{margin-top:12px;font-size:14.5px}
	body.cz-blog .bl-more{margin-top:20px}
	/* flechas sobre la fila de portadas, a los lados de la activa (js/blog.js
	   las mueve dentro de .bl-col): siempre en el mismo sitio, en azul sólido
	   para que se vean, y sin moverse al tocarlas (ajustes 21-10-2026) */
	body.cz-blog .bl-col .bl-nav{position:absolute;left:10px;right:10px;top:50%;margin:0;transform:translateY(-50%);justify-content:space-between;pointer-events:none;z-index:3}
	body.cz-blog .bl-col .bl-nav button,body.cz-blog .bl-col .bl-nav button:hover,body.cz-blog .bl-col .bl-nav button:focus{pointer-events:auto;width:44px;height:44px;background:var(--bl-ink);border-color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:none}
	body.cz-blog .bl-col .bl-nav button svg,body.cz-blog .bl-col #blPrev:hover svg,body.cz-blog .bl-col #blNext:hover svg{stroke:#fff;transform:none;transition:none}
}

@media (prefers-reduced-motion:reduce){
	body.cz-blog .bl-track.anim,body.cz-blog .bl-track.intro{transition-duration:.01s}
	body.cz-blog .bl-hero-img{transition:none;clip-path:none}
}