/* Bloque «Artículos» universal 2027 · v1.4.0 · 2026-09-26 (tema 5.7.6)
   Maqueta: Welcome 2027/maqueta-articulos-2027.html
   Todo prefijado con .a27: el kit de Elementor imprime reglas en línea que pesan
   más que una sola clase. Colores y tipos de wti-base-2027.
   Regla de la casa: cada cambio = nombre de archivo nuevo (WP Rocket).

   v1.4.0 — Móvil y tableta (hasta 1024 px): carrusel que se desliza con el dedo
   (Angel: «en versión móvil todos los artículos y el explora mejor en carrusel»).
     · Antes, en el móvil, el Magazine salía con tarjetas de 62 px, la foto como
       un óvalo de 32×16 y el título a una palabra por línea: la regla «asoma»
       (media tarjeta de la siguiente, pensada para el escritorio) no llevaba
       @media y pisaba la del móvil. Ahora solo vale de 1025 px para arriba.
     · Carrusel y parrilla (clase a27--desliza, la pone el PHP) se deslizan de
       lado: en el teléfono una tarjeta de casi todo el ancho y asoma la
       siguiente; en la tableta, dos o tres. La tira va de borde a borde de la
       pantalla (sin salirse: usa el aire del contenedor).
     · Tarjeta: foto arriba 2:1 a todo el ancho, debajo la pastilla, la fecha y
       el título (tres líneas como mucho), el extracto y el botón, como estaban.
       Todas las tarjetas a la misma altura. Nada encima de la foto.
     · Sin contadores. Flechas propias solo en la tableta. Con el teclado: la
       tira se enfoca y se mueve con las flechas (el JS le da nombre).
     · Se quedan como estaban: logos, «solo imagen», lista y el escritorio. */

.a27{padding:34px 0 38px;--a27-hueco:16px;--a27-sangre:var(--wti-margen,22px)}
/* Donde el bloque va sin aire propio (dentro del texto de una noticia, en los
   listados, al lado de la foto de cabecera), la tira no sale de su caja. */
.wti-rp27 .a27,.wti-listado .a27,.hs27-lado .a27{--a27-sangre:0px}
.a27.a27--crema{background:var(--wti-crema-fondo,#FBF7F2)}
.a27 .a27-cabeza{margin-bottom:18px}

/* ---------- Carrusel ---------- */
.a27 .a27-carro{position:relative}
.a27 .a27-tira{display:flex;gap:var(--a27-hueco);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.a27 .a27-tira::-webkit-scrollbar{display:none}
.a27 .a27-tira > .a27-tarjeta{flex:0 0 calc((100% - (var(--a27-n) - 1) * var(--a27-hueco)) / var(--a27-n));scroll-snap-align:start;min-width:0}
.a27 .a27-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18);cursor:pointer;display:grid;place-items:center;color:var(--wti-tinta,#1B1512);padding:0;transition:color .2s,transform .2s,opacity .2s}
.a27 .a27-flecha:hover{color:var(--wti-naranja,#F57C00);transform:translateY(-50%) scale(1.06)}
.a27 .a27-flecha[disabled]{opacity:0;pointer-events:none}
.a27 .a27-atras{left:-14px}
.a27 .a27-alante{right:-14px}

/* Media tarjeta de la siguiente asomando (solo escritorio: v1.4.0, con @media) */
@media (min-width:1025px){
	.a27.a27--asoma .a27-tira > .a27-tarjeta{flex-basis:calc((100% - var(--a27-n) * var(--a27-hueco)) / (var(--a27-n) + .5))}
}
/* La caja de flechas de la parrilla solo cuenta cuando se desliza (tableta). */
.a27 .a27-carro--rejilla > .a27-flecha{display:none}
/* Con el teclado se ve dónde está uno. */
.a27 .a27-enlace:focus-visible{outline:2px solid var(--wti-naranja,#F57C00);outline-offset:-2px;border-radius:var(--wti-radio,14px)}
.a27 .a27-tira:focus-visible,
.a27 .a27-rejilla:focus-visible{outline:2px solid var(--wti-naranja,#F57C00);outline-offset:2px;border-radius:var(--wti-radio,14px)}

/* Tarjeta final «Ver todos» */
.a27 .a27-tarjeta.a27-final{background:var(--wti-crema,#F2E6D8);border-color:var(--wti-crema,#F2E6D8);min-height:100%}
.a27 .a27-tarjeta.a27-final:hover{box-shadow:none;background:var(--wti-crema-hover,#EADBC7)}
.a27 .a27-final .a27-enlace{align-items:center;justify-content:center;text-align:center;gap:14px;min-height:180px}
.a27 .a27-final-flecha{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--wti-naranja,#F57C00);color:#fff;font-size:22px;transition:transform .25s}
.a27 .a27-final:hover .a27-final-flecha{transform:translateX(4px)}
.a27 .a27-final-texto{font:500 17px/1.2 var(--wti-titulos);color:var(--wti-marron,#7A5238)}

/* ---------- Parrilla y lista ---------- */
.a27 .a27-rejilla{display:grid;grid-template-columns:repeat(var(--a27-n),minmax(0,1fr));gap:var(--a27-hueco)}
.a27 .a27-lista{display:flex;flex-direction:column;gap:12px}

/* ---------- Tarjeta ---------- */
.a27 .a27-tarjeta{display:flex;flex-direction:column;background:#fff;border:1px solid var(--wti-linea,#E8E2DA);border-radius:var(--wti-radio,14px);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.a27 .a27-tarjeta:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,21,18,.1)}
.a27 .a27-enlace{display:flex;flex-direction:column;gap:10px;padding:14px;color:inherit;text-decoration:none;flex:1 1 auto}
.a27 .a27-foto{flex:none;position:relative;aspect-ratio:2/1;border-radius:var(--wti-radio-chico,10px);overflow:hidden;background:var(--wti-foto-fondo,#F3EFEA)}
.a27 .a27-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.a27 .a27-tarjeta:hover .a27-foto img{transform:scale(1.04)}
.a27 .a27-texto{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 auto}
.a27 .a27-pastilla{display:inline-block;align-self:flex-start;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 11px/1 var(--wti-texto);text-transform:uppercase;letter-spacing:.06em;color:var(--wti-marron,#7A5238);background:var(--wti-crema,#F2E6D8);padding:5px 9px;border-radius:99px}
.a27 .a27-foto .a27-pastilla{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px)}
.a27 .a27-fecha{font:500 12px/1.2 var(--wti-texto);color:var(--wti-gris-claro,#A79C93);letter-spacing:.02em}
.a27 .a27-nombre{margin:0;font:500 17px/1.25 var(--wti-titulos);color:var(--wti-tinta,#1B1512);text-transform:none;transition:color .2s}
.a27 .a27-tarjeta:hover .a27-nombre{color:var(--wti-naranja,#F57C00)}
.a27 .a27-extracto{margin:0;font:400 14px/1.5 var(--wti-texto);color:#5B524C;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.a27 .a27-mas{margin-top:auto;font:16px/1 var(--wti-botones);letter-spacing:.06em;color:var(--wti-naranja,#F57C00)}

/* ---------- Dónde va la imagen ---------- */
.a27--img-abajo .a27-foto{order:2}
.a27--img-izquierda .a27-enlace,
.a27--lista .a27-enlace{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:center;gap:14px}
.a27--lista .a27-enlace{grid-template-columns:260px minmax(0,1fr);gap:18px}
.a27--img-sin .a27-enlace{display:flex}

/* Solo imagen (logos de los destacados) */
.a27--img-solo .a27-enlace{padding:10px}
.a27 .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.a27--img-solo .a27-foto{border-radius:var(--wti-radio-chico,10px)}

/* Línea de categorías encima (noticias) */
.a27 .a27-linea{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.a27 .a27-linea-cat{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid var(--wti-linea,#E8E2DA);border-radius:99px;background:#fff;font:500 14px/1 var(--wti-titulos);letter-spacing:.02em;text-transform:uppercase;color:var(--wti-tinta,#1B1512);text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.a27 .a27-linea-cat:hover{border-color:var(--wti-naranja,#F57C00);color:var(--wti-naranja,#F57C00);background:var(--wti-crema-fondo,#FBF7F2)}

/* Números de página */
.a27 .a27-paginas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.a27 .a27-pagina{min-width:40px;height:40px;display:inline-grid;place-items:center;padding:0 12px;border:1px solid var(--wti-linea,#E8E2DA);border-radius:99px;background:#fff;font:500 15px/1 var(--wti-titulos);color:var(--wti-tinta,#1B1512);text-decoration:none;transition:border-color .2s,color .2s}
.a27 .a27-pagina:hover{border-color:var(--wti-naranja,#F57C00);color:var(--wti-naranja,#F57C00)}
.a27 .a27-pagina.is-actual{background:var(--wti-naranja,#F57C00);border-color:var(--wti-naranja,#F57C00);color:#fff}

/* Fondo degradado crema (el de Esenciales bajo la foto de cabecera) */
.a27.a27--degradado{background:linear-gradient(180deg,var(--wti-crema,#F2E6D8) 0%,var(--wti-crema-fondo,#FBF7F2) 100%)}

/* Cabecera al lado: título y lema en una columna estrecha a la izquierda,
   las tarjetas llenan el resto */
.a27--cab-lado .a27-dentro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.6fr);align-items:start;gap:20px 36px}
.a27--cab-lado .a27-cabeza{margin-bottom:0;display:block}
.a27--cab-lado .a27-cabeza .wti-enlace{margin-top:14px;display:inline-flex}

/* Logos: como Esenciales. Tarjeta blanca que flota, el logo la llena de lado a
   lado (los logos ya traen su aire dentro) y la última fila se centra. */
.a27 .a27-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.a27 .a27-logos > .a27-tarjeta{flex:0 0 calc((100% - (var(--a27-n) - 1) * 16px) / var(--a27-n));max-width:calc((100% - (var(--a27-n) - 1) * 16px) / var(--a27-n));border:0;box-shadow:0 10px 24px -14px rgba(27,21,18,.35)}
.a27 .a27-logos > .a27-tarjeta:hover{box-shadow:0 16px 30px -14px rgba(27,21,18,.4)}
.a27 .a27-logos .a27-enlace{padding:0;gap:0}
.a27 .a27-logos .a27-foto{aspect-ratio:2/1;border-radius:0;background:#fff}
.a27 .a27-logos .a27-foto img{object-fit:cover}
.a27 .a27-logos .a27-tarjeta:hover .a27-foto img{transform:scale(1.03)}

/* ---------- Móvil: sus propias tarjetas a la vista ---------- */
@media (max-width:767px){
	.a27{padding:26px 0 30px}
	.a27 .a27-tira > .a27-tarjeta{flex-basis:calc((100% - (var(--a27-nm) - 1) * 12px) / var(--a27-nm))}
	.a27 .a27-tira{gap:12px}
	.a27 .a27-rejilla{grid-template-columns:repeat(var(--a27-nmc),minmax(0,1fr));gap:12px}
	.a27 .a27-flecha{display:none}
	.a27 .a27-nombre{font-size:16px}
	.a27 .a27-linea{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
	.a27 .a27-linea::-webkit-scrollbar{display:none}
	.a27 .a27-linea-cat{flex:none}
	.a27--cab-lado .a27-dentro{grid-template-columns:1fr;gap:16px}
	.a27 .a27-logos{gap:12px}
	.a27 .a27-logos > .a27-tarjeta{flex-basis:calc((100% - (var(--a27-nmc) - 1) * 12px) / var(--a27-nmc));max-width:calc((100% - (var(--a27-nmc) - 1) * 12px) / var(--a27-nmc))}
	.a27--img-izquierda .a27-enlace,
	.a27--lista .a27-enlace{grid-template-columns:38% minmax(0,1fr);gap:10px;padding:10px}
}
/* Tableta: como mucho tres y media a la vista */
@media (min-width:768px) and (max-width:1024px){
	.a27 .a27-tira > .a27-tarjeta{flex-basis:calc((100% - 2.5 * var(--a27-hueco)) / 3.5)}
	.a27 .a27-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}
	.a27 .a27-logos > .a27-tarjeta{flex-basis:calc((100% - 3 * 14px) / 4);max-width:calc((100% - 3 * 14px) / 4)}
	.a27--cab-lado .a27-dentro{grid-template-columns:1fr}
}

/* ---------- Móvil y tableta: carrusel que se desliza (v1.4.0) ----------
   --a27-ancho: el ancho de cada tarjeta, según la pantalla (abajo). La tira se
   come el aire lateral del contenedor (--a27-sangre) para ir de borde a borde,
   y el enganche deja cada tarjeta alineada con el texto de la página. */
@media (max-width:1024px){
	.a27.a27--desliza .a27-tira,
	.a27.a27--desliza .a27-rejilla{
		display:flex;
		flex-wrap:nowrap;
		gap:var(--a27-hueco-movil,12px);
		grid-template-columns:none;
		overflow-x:auto;
		overflow-y:hidden;
		overscroll-behavior-x:contain;
		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
		scroll-padding-inline:var(--a27-sangre);
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		margin:0 calc(-1 * var(--a27-sangre));
		padding:4px var(--a27-sangre) 12px;
	}
	.a27.a27--desliza .a27-rejilla::-webkit-scrollbar{display:none}
	.a27.a27--desliza .a27-tira > .a27-tarjeta,
	.a27.a27--desliza .a27-rejilla > .a27-tarjeta{
		flex:0 0 var(--a27-ancho);
		max-width:none;
		min-width:0;
		scroll-snap-align:start;
	}
	/* Una sola tarjeta: a todo el ancho, sin hueco a la derecha. */
	.a27.a27--desliza .a27-tira > .a27-tarjeta:only-child,
	.a27.a27--desliza .a27-rejilla > .a27-tarjeta:only-child{flex-basis:100%}

	/* La tarjeta: foto arriba a todo el ancho (2:1) y el texto debajo, sea
	   cual sea el sitio de la foto en el escritorio. */
	.a27.a27--desliza .a27-enlace{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px}
	.a27.a27--desliza .a27-foto{order:0;width:100%;align-self:stretch}
	.a27.a27--desliza .a27-texto{order:1;gap:7px}
	.a27.a27--desliza .a27-nombre{
		display:-webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
		overflow:hidden;
		overflow-wrap:break-word;
		line-height:1.25;
	}
	.a27.a27--desliza .a27-final .a27-enlace{align-items:center;justify-content:center;min-height:0}

	/* Dentro del texto de una noticia ([wti_articulos]): la columna ya tiene su
	   aire, el bloque no suma otro (las tarjetas ganan ese ancho). */
	.wti-ficha-texto .a27{--a27-sangre:0px}
	.wti-ficha-texto .a27 .a27-dentro.wti-dentro{padding-left:0;padding-right:0}
}
/* Teléfono: una tarjeta de casi todo el ancho y asoma la siguiente. */
@media (max-width:559px){
	.a27{--a27-ancho:88%}
}
/* Teléfono grande en horizontal: una y media. */
@media (min-width:560px) and (max-width:767px){
	.a27{--a27-ancho:calc((100% - 12px) / 1.6)}
}
/* Tableta: dos y pico (vertical) o tres y pico (horizontal). Flechas propias. */
@media (min-width:768px) and (max-width:1024px){
	.a27{--a27-hueco-movil:16px}
	.a27.a27--desliza .a27-carro--rejilla > .a27-flecha{display:grid}
}
@media (min-width:768px) and (max-width:899px){
	.a27{--a27-ancho:calc((100% - 2 * 16px) / 2.4)}
}
@media (min-width:900px) and (max-width:1024px){
	.a27{--a27-ancho:calc((100% - 3 * 16px) / 3.3)}
}

@media (prefers-reduced-motion:reduce){
	.a27 .a27-tira,.a27 .a27-rejilla{scroll-behavior:auto}
	.a27 .a27-tarjeta,.a27 .a27-foto img{transition:none}
	.a27 .a27-tarjeta:hover{transform:none}
}

/* 1.4.1 (2026-09-29, tema 5.15.0) — iPad en vertical (700–1024 px, más alto que
   ancho). Angel: «Esenciales en una línea, 6». Los logos, seis por fila. (Antes
   salían 3 + 3: la cuenta era de 4 por fila con 14 px de hueco, pero el hueco real
   es de 16 px y no cabían.) */
@media (min-width:700px) and (max-width:1024px) and (orientation:portrait){
	.a27 .a27-logos{gap:12px}
	.a27 .a27-logos > .a27-tarjeta{flex-basis:calc((100% - 5 * 12px) / 6);max-width:calc((100% - 5 * 12px) / 6)}
}