/* Plantilla de artículo de la revista (templates/articulo.php). Prototipo aprobado el 26/09/2026
 * (prototipos/articulo/). El contenido del artículo lo estiliza cie-articulos.css; aquí va todo lo que
 * lo rodea. Colores de cie-marca (--cie-*) con los de la identidad como respaldo; el color de la isla
 * llega por la clase cie-isla-<slug> del <main> y del <body>.
 * Todo con el prefijo .cie-art: gana a los estilos globales de Elementor y de Personalizar. */

.cie-art {
	--t-azul: var(--cie-azul, #143E66);
	--t-azul-hover: var(--cie-azul-hover, #0F3050);
	--t-azul-50: var(--cie-azul-50, #EEF3F8);
	--t-azul-100: var(--cie-azul-100, #DCE6F0);
	--t-texto: var(--cie-texto, #16293D);
	--t-texto-2: var(--cie-texto-2, #3A4D62);
	--t-suave: var(--cie-texto-suave, #52657A);
	--t-borde: var(--cie-borde, #D5DFEA);
	--t-aviso: var(--cie-aviso, #9B2A22);
	--t-aviso-fondo: var(--cie-aviso-fondo, #FBEEEC);
	--t-exito: var(--cie-exito, #1B6641);
	--t-exito-fondo: var(--cie-exito-fondo, #E7F3EC);
	--t-acento: var(--cie-acento, #DCE6F0);
	--t-acento-texto: var(--cie-acento-texto, #143E66);
	--t-acento-claro: var(--cie-acento-claro, #F5F8FB);
	--t-acento-oscuro: var(--cie-acento-oscuro, #BDC6CE);
	--t-fuente: var(--cie-fuente, 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif);
	--t-foco: 0 0 0 3px #fff, 0 0 0 5px var(--t-azul);
	--t-cabecera: 96px; /* Alto de la cabecera fija de la web: margen de los saltos del índice y del lateral fijo. */
	display: block; background: var(--cie-fondo, #F6F8FB); color: var(--t-texto); font-family: var(--t-fuente); font-size: 16px; line-height: 1.6;
	padding-bottom: 56px;
}
.cie-art *, .cie-art *::before, .cie-art *::after { box-sizing: border-box; }
.cie-art img { max-width: 100%; height: auto; }
.cie-art :is(a, button, summary, input):focus-visible { outline: none; box-shadow: var(--t-foco); }
.cie-art .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; }
.cie-art [hidden] { display: none !important; }
.cie-art .cie-art__marco { max-width: 1040px; margin: 0 auto; padding-inline: 16px; }

/* ---------- Migas ---------- */
.cie-art .cie-art__migas ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 14px 0 0; font-size: 14px; color: var(--t-suave); }
.cie-art .cie-art__migas li { margin: 0; }
.cie-art .cie-art__migas li:not(:last-child)::after { content: "›"; margin-left: 6px; }
.cie-art .cie-art__migas a { color: var(--t-texto-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cabecera ---------- */
.cie-art .cie-art__cabecera { padding: 20px 0; display: grid; gap: 14px; max-width: 780px; }
.cie-art .cie-art__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cie-art .cie-art__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.2; text-decoration: none; }
.cie-art a.cie-art__chip--cat { background: var(--t-acento); color: var(--t-acento-texto); }
.cie-art a.cie-art__chip--cat:hover { background: var(--t-acento-oscuro); color: var(--t-acento-texto); }
.cie-art .cie-art__chip--fecha { background: #fff; color: var(--t-azul); border: 1px solid var(--t-borde); }
.cie-art .cie-art__chip--pasado { background: var(--t-aviso-fondo); color: var(--t-aviso); }
.cie-art h1.cie-art__titulo { margin: 0; font-family: inherit; font-size: 30px; line-height: 1.15; font-weight: 900; letter-spacing: -.02em; color: var(--t-azul); text-wrap: balance; }
.cie-art .cie-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 14px; color: var(--t-suave); }
.cie-art .cie-art__meta span { display: inline-flex; align-items: center; gap: 6px; }
.cie-art .cie-art__meta svg { flex: none; }
.cie-art .cie-art__pasado { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--t-aviso-fondo); color: var(--t-aviso); font-weight: 700; font-size: 15px; line-height: 1.45; }
.cie-art .cie-art__pasado svg { flex: none; margin-top: 1px; }
.cie-art .cie-art__pasado a { color: var(--t-aviso); text-decoration: underline; }

/* ---------- Patrocinio: franja discreta y declarada ---------- */
.cie-art .cie-art__patro { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: #fff; border: 1px solid var(--t-borde); border-radius: 12px; text-decoration: none; color: var(--t-texto-2); max-width: 520px; }
.cie-art .cie-art__patro img { width: 72px; height: 72px; object-fit: contain; padding: 4px; background: #fff; border-radius: 12px; border: 1px solid var(--t-borde); flex: none; }
.cie-art .cie-art__patro-txt { display: grid; font-size: 14px; line-height: 1.35; }
.cie-art .cie-art__patro-txt b { font-size: 18px; color: var(--t-azul); font-weight: 800; }
.cie-art .cie-art__patro-et { margin-left: auto; flex: none; font-size: 12px; font-weight: 800; color: var(--t-suave); border: 1px solid var(--t-borde); border-radius: 999px; padding: 3px 9px; }
.cie-art a.cie-art__patro:hover { border-color: var(--t-azul-100); background: var(--t-azul-50); color: var(--t-texto-2); }

/* ---------- Portada: a sangre en el móvil ---------- */
.cie-art .cie-art__portada { margin: 0 -16px; }
.cie-art .cie-art__portada img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cie-art .cie-art__portada figcaption { padding: 8px 16px 0; font-size: 14px; line-height: 1.45; color: var(--t-suave); }

/* ---------- Cuerpo: lectura + lateral ---------- */
.cie-art .cie-art__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
.cie-art .cie-art__lectura { min-width: 0; }
.cie-art .cie-art__lateral { min-width: 0; }
.cie-art .cie-articulo h2[id] { scroll-margin-top: var(--t-cabecera); }

/* ---------- Índice: desplegable en el móvil, fijo en el lateral en escritorio ---------- */
.cie-art .cie-art__indice { background: #fff; border: 1px solid var(--t-borde); border-radius: 12px; }
.cie-art .cie-art__indice summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; font-weight: 800; color: var(--t-azul); font-size: 16px; border-radius: 12px; }
.cie-art .cie-art__indice summary::-webkit-details-marker { display: none; }
.cie-art .cie-art__indice summary small { font-weight: 700; color: var(--t-suave); font-size: 14px; margin-left: 6px; }
.cie-art .cie-art__indice summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--t-azul); border-bottom: 2.5px solid var(--t-azul); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.cie-art .cie-art__indice[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.cie-art .cie-art__indice ol { list-style: none; margin: 0; padding: 0 8px 10px; counter-reset: ind; }
.cie-art .cie-art__indice li { counter-increment: ind; margin: 0; }
.cie-art .cie-art__indice a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px; border-radius: 8px; color: var(--t-texto-2); font-weight: 700; font-size: 15px; line-height: 1.35; text-decoration: none; }
.cie-art .cie-art__indice a::before { content: counter(ind); flex: none; font-size: 13px; font-weight: 800; color: var(--t-suave); font-variant-numeric: tabular-nums; min-width: 14px; }
.cie-art .cie-art__indice a:hover { background: var(--t-azul-50); color: var(--t-azul); }
.cie-art .cie-art__indice a[aria-current="true"] { background: var(--t-acento-claro); color: var(--t-azul); box-shadow: inset 3px 0 0 var(--t-acento-oscuro); }

/* ---------- Secciones de la revista (el menú «Revista» no las despliega) ---------- */
.cie-art .cie-art__secciones h2 { margin: 0 0 10px; font-family: inherit; font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--t-azul); }
.cie-art .cie-art__secciones ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cie-art .cie-art__secciones li { margin: 0; }
.cie-art .cie-art__secciones a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--t-borde); color: var(--t-azul); font-weight: 700; font-size: 15px; line-height: 1.3; text-decoration: none; }
.cie-art .cie-art__secciones a span { font-size: 13px; font-weight: 800; color: var(--t-suave); font-variant-numeric: tabular-nums; }
.cie-art .cie-art__secciones a:hover { background: var(--t-azul-50); color: var(--t-azul); }
.cie-art .cie-art__secciones a[aria-current="true"] { background: var(--t-acento); border-color: var(--t-acento-oscuro); color: var(--t-acento-texto); }
.cie-art .cie-art__secciones a[aria-current="true"] span { color: inherit; }
.cie-art .cie-art__secciones--movil { margin-top: 32px; }
.cie-art .cie-art__secciones--lateral { display: none; }

/* ---------- Pie del artículo: fecha y compartir ---------- */
.cie-art .cie-art__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--t-borde); font-size: 14px; line-height: 1.5; color: var(--t-suave); }
.cie-art .cie-art__compartir { display: flex; flex-wrap: wrap; gap: 8px; }
.cie-art .cie-art__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--t-azul); background: #fff; color: var(--t-azul); font: 700 15px/1.2 var(--t-fuente); text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; }
.cie-art .cie-art__btn:hover, .cie-art .cie-art__btn:focus { background: var(--t-azul-50); color: var(--t-azul); border-color: var(--t-azul); }
.cie-art .cie-art__btn:active { transform: translateY(1px); }

/* ---------- Tarjeta final del patrocinador ---------- */
.cie-art .cie-art__gracias { margin-top: 24px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 20px; background: #fff; border: 1px solid var(--t-borde); border-radius: 16px; }
.cie-art .cie-art__gracias img { width: 112px; height: 112px; object-fit: contain; padding: 6px; background: #fff; border-radius: 16px; border: 1px solid var(--t-borde); }
.cie-art .cie-art__gracias h2 { margin: 0 0 4px; font-family: inherit; font-size: 18px; font-weight: 800; color: var(--t-azul); line-height: 1.3; }
.cie-art .cie-art__gracias p { margin: 0; font-size: 15px; color: var(--t-texto-2); line-height: 1.5; }
.cie-art .cie-art__gracias .cie-art__btn { grid-column: 1 / -1; justify-self: start; }
.cie-art .cie-art__gracias small { grid-column: 1 / -1; font-size: 13px; color: var(--t-suave); }

/* ---------- Revista: formulario de Brevo con el traje de la submarca ---------- */
.cie-art .cie-art__revista { margin-top: 48px; background: var(--t-azul); color: #fff; border-radius: 20px; padding: 28px 20px; display: grid; gap: 24px; position: relative; overflow: hidden; }
.cie-art .cie-art__revista::after { content: ""; position: absolute; width: 120px; height: 120px; right: -56px; top: -56px; border-radius: 28px; transform: rotate(45deg); background: var(--t-acento); opacity: .9; pointer-events: none; }
.cie-art .cie-art__revista > * { position: relative; z-index: 1; }
.cie-art .cie-art__revista-logo { display: block; width: 200px; margin-bottom: 24px; }
.cie-art .cie-art__revista h2 { margin: 0 0 8px; font-family: inherit; font-size: 26px; line-height: 1.2; font-weight: 900; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.cie-art .cie-art__revista-txt p { margin: 0; color: #DCE6F0; max-width: 46ch; }
.cie-art .cie-art__revista :is(a, button, input, summary):focus-visible { box-shadow: 0 0 0 3px var(--t-azul), 0 0 0 5px #fff; }
.cie-art .cie-form { text-align: left; font-family: var(--t-fuente); }
.cie-art .cie-form form { display: grid; gap: 16px; margin: 0; }
.cie-art .cie-form .sib-form-block { margin: 0; padding: 0; }
.cie-art .cie-form .form__label-row { display: grid; gap: 6px; }
.cie-art .cie-form .entry__label { display: block; margin: 0; padding: 0; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.cie-art .cie-form .input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 8px; border: 1px solid #fff; background: #fff; color: var(--t-texto); font: 400 16px/1.4 var(--t-fuente); box-shadow: none; }
.cie-art .cie-form .input:focus { outline: none; box-shadow: 0 0 0 3px var(--t-azul), 0 0 0 5px #fff; }
.cie-art .cie-form .input--hidden, .cie-art .cie-form input[name="email_address_check"] { display: none !important; }
.cie-art .cie-form__idiomas { border: 0; margin: 0; padding: 0; min-width: 0; }
.cie-art .cie-form__opciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cie-art .cie-form__opcion { position: relative; display: block; margin: 0; cursor: pointer; }
.cie-art .cie-form__opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cie-art .cie-form__opcion span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: 15px; font-weight: 700; }
.cie-art .cie-form__opcion input:checked + span { background: #fff; border-color: #fff; color: var(--t-azul); }
.cie-art .cie-form__opcion input:focus-visible + span { box-shadow: 0 0 0 3px var(--t-azul), 0 0 0 5px #fff; }
.cie-art .cie-form__priv { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; font-weight: 400; color: #DCE6F0; line-height: 1.45; cursor: pointer; }
.cie-art .cie-form__priv input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--t-acento); }
.cie-art .cie-form__priv a { color: #fff; text-decoration: underline; }
.cie-art .cie-form__ts { margin: 0; font-size: 13px; line-height: 1.45; color: #B9C9DA; }
.cie-art .cie-form .sib-captcha .form__label-row { display: flex; }
.cie-art .cie-form #sib-captcha:not(:empty) { margin: 4px 0; }
.cie-art .cie-form .cie-form__enviar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 999px; border: 0; background: var(--t-acento); color: var(--t-acento-texto); font: 800 16px/1.2 var(--t-fuente); text-transform: none; letter-spacing: 0; cursor: pointer; padding: 0 24px; }
.cie-art .cie-form .cie-form__enviar:hover { background: var(--t-acento-oscuro); color: var(--t-acento-texto); }
.cie-art .cie-form .cie-form__enviar:active { transform: translateY(1px); }
.cie-art .cie-form .cie-form__enviar svg { width: 18px; height: 18px; fill: currentColor; }
.cie-art .cie-form .sib-hide-loader-icon { display: none; }
.cie-art .cie-form .entry__error { display: block; margin: 0; font-size: 14px; font-weight: 700; color: #FFD9D4; }
.cie-art .cie-form .entry__error:empty { display: none; }
/* Avisos de Brevo: ocultos hasta que main.js añade --active al que toca. */
.cie-art .cie-form #error-message, .cie-art .cie-form #success-message { display: none; }
.cie-art .cie-form .sib-form-message-panel--active { display: block !important; margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; font-size: 15px; line-height: 1.45; }
.cie-art .cie-form__msg--ok { background: var(--t-exito-fondo); color: var(--t-exito); }
.cie-art .cie-form__msg--error { background: var(--t-aviso-fondo); color: var(--t-aviso); }

/* ---------- Sigue leyendo ---------- */
.cie-art .cie-art__mas { margin-top: 56px; }
.cie-art .cie-art__mas-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cie-art .cie-art__mas h2 { margin: 0; font-family: inherit; font-size: 24px; line-height: 1.2; font-weight: 900; color: var(--t-azul); letter-spacing: -.01em; }
.cie-art .cie-art__mas-cab a { font-weight: 700; color: var(--t-azul); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.cie-art .cie-art__tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cie-art .cie-art__tarjeta { margin: 0; }
.cie-art .cie-art__tarjeta a { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; height: 100%; text-decoration: none; color: inherit; padding: 8px; background: #fff; border: 1px solid var(--t-borde); border-radius: 14px; }
.cie-art .cie-art__tarjeta img { display: block; width: 112px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.cie-art .cie-art__tarjeta-sin { display: block; width: 112px; aspect-ratio: 1; border-radius: 10px; background: var(--t-acento-claro); border: 1px solid var(--t-borde); }
.cie-art .cie-art__tarjeta a > div > span { display: block; font-size: 13px; font-weight: 800; color: var(--t-suave); margin-bottom: 4px; }
.cie-art .cie-art__tarjeta b { display: block; font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--t-azul); text-wrap: balance; }
.cie-art .cie-art__tarjeta a:hover { border-color: var(--t-acento-oscuro); }
.cie-art .cie-art__tarjeta a:hover b { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 700px) {
	.cie-art h1.cie-art__titulo { font-size: 40px; }
	.cie-art .cie-art__portada { margin: 0; }
	.cie-art .cie-art__portada img { border-radius: 16px; aspect-ratio: 16 / 9; }
	.cie-art .cie-art__portada figcaption { padding-inline: 0; }
	.cie-art .cie-art__patro { padding: 12px 18px 12px 12px; gap: 16px; max-width: 600px; }
	.cie-art .cie-art__patro img { width: 96px; height: 96px; }
	.cie-art .cie-art__patro-txt { font-size: 15px; }
	.cie-art .cie-art__patro-txt b { font-size: 20px; }
	.cie-art .cie-art__gracias { gap: 24px; padding: 24px; }
	.cie-art .cie-art__gracias img { width: 136px; height: 136px; }
	.cie-art .cie-art__gracias h2 { font-size: 20px; }
	.cie-art .cie-art__revista { grid-template-columns: 1fr 1fr; padding: 40px; align-items: start; }
	.cie-art .cie-art__revista::after { width: 180px; height: 180px; right: auto; top: auto; left: -70px; bottom: -70px; border-radius: 36px; }
	.cie-art .cie-form__opciones { grid-template-columns: repeat(3, 1fr); }
	.cie-art .cie-art__tarjetas { grid-template-columns: repeat(3, 1fr); }
	.cie-art .cie-art__tarjeta a { grid-template-columns: 1fr; align-items: start; padding: 0 0 16px; overflow: hidden; }
	.cie-art .cie-art__tarjeta img { width: 100%; aspect-ratio: 3 / 2; border-radius: 0; }
	.cie-art .cie-art__tarjeta a > div { padding: 0 16px; }
	.cie-art .cie-art__tarjeta-sin { width: 100%; aspect-ratio: 3 / 2; border-radius: 0; border: 0; }
}
@media (min-width: 1000px) {
	.cie-art h1.cie-art__titulo { font-size: 46px; }
	.cie-art .cie-art__cuerpo { grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; padding-top: 40px; }
	.cie-art .cie-art__lateral { order: 2; position: sticky; top: var(--t-cabecera); align-self: start; display: grid; gap: 28px; max-height: calc(100vh - var(--t-cabecera) - 16px); overflow-y: auto; }
	.cie-art .cie-art__indice { border: 0; background: none; }
	.cie-art .cie-art__indice summary { pointer-events: none; padding: 0 10px 6px; min-height: 0; font-size: 14px; color: var(--t-suave); }
	.cie-art .cie-art__indice summary::after { display: none; }
	.cie-art .cie-art__indice ol { padding: 0; }
	.cie-art .cie-art__secciones--movil { display: none; }
	.cie-art .cie-art__secciones--lateral { display: block; padding-top: 24px; border-top: 1px solid var(--t-borde); }
	.cie-art .cie-art__secciones--lateral h2 { font-size: 14px; color: var(--t-suave); padding: 0 10px; }
	.cie-art .cie-art__secciones--lateral ul { display: grid; gap: 2px; }
	.cie-art .cie-art__secciones--lateral a { display: flex; justify-content: space-between; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--t-texto-2); }
	.cie-art .cie-art__secciones--lateral a:hover { background: var(--t-azul-50); color: var(--t-azul); }
	.cie-art .cie-art__secciones--lateral a[aria-current="true"] { background: var(--t-acento-claro); color: var(--t-azul); box-shadow: inset 3px 0 0 var(--t-acento-oscuro); }
}
@media (prefers-reduced-motion: reduce) {
	.cie-art .cie-art__indice summary::after { transition: none; }
}

/* ---------- Páginas de sección (templates/seccion.php) ---------- */
.cie-art--seccion .cie-art__seccion-desc { margin: 8px 0 0; max-width: 62ch; font-size: 18px; line-height: 1.5; color: var(--t-texto-2); }
.cie-art--seccion .cie-art__seccion-cab .cie-art__meta { margin-top: 10px; }
.cie-art--seccion .cie-art__secciones--hijas { margin-top: 24px; }
.cie-art--seccion .cie-art__secciones--hijas h2 { font-size: 15px; color: var(--t-suave); }
.cie-art--seccion .cie-art__secciones--seccion { margin-top: 48px; }
.cie-art--seccion .cie-art__listado { margin-top: 32px; }
.cie-art--seccion .cie-art__tarjeta-fecha { display: block; margin-top: 6px; font-size: 13px; color: var(--t-suave); }
.cie-art--seccion .cie-art__seccion-vacia { margin: 32px 0 0; color: var(--t-suave); }
.cie-art .cie-art__paginas { margin-top: 32px; }
.cie-art .cie-art__paginas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cie-art .cie-art__paginas li { margin: 0; }
.cie-art .cie-art__paginas :is(a, span) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--t-borde); background: #fff; color: var(--t-azul); font-weight: 700; text-decoration: none; }
.cie-art .cie-art__paginas a:hover { border-color: var(--t-acento-oscuro); background: var(--t-azul-50); }
.cie-art .cie-art__paginas .current { background: var(--t-azul); border-color: var(--t-azul); color: #fff; }
.cie-art .cie-art__paginas .dots { border: 0; background: none; min-width: 24px; padding: 0; }

/* ---------- Logo del patrocinador según su forma (templates: cie-art__patro--ancho | --cuadrado) ----------
   Los logos alargados (Golden House, La Bodeguita, Zielo) se recortaban en el cuadrado: se ven enteros,
   con alto fijo y el ancho que pidan. Los cuadrados siguen en su cuadrado, algo más grandes. */
.cie-art .cie-art__patro--cuadrado img { width: 72px; height: 72px; }
.cie-art .cie-art__patro--ancho { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo et" "txt txt"; align-items: center; gap: 10px 12px; padding: 12px 14px; }
.cie-art .cie-art__patro--ancho img { grid-area: logo; justify-self: start; width: auto; height: 72px; max-width: 100%; padding: 6px 10px; }
.cie-art .cie-art__patro--ancho .cie-art__patro-et { grid-area: et; align-self: start; margin-left: 0; }
.cie-art .cie-art__patro--ancho .cie-art__patro-txt { grid-area: txt; }
.cie-art .cie-art__gracias--ancho { grid-template-columns: 1fr; }
.cie-art .cie-art__gracias--ancho img { justify-self: start; width: auto; height: 96px; max-width: 100%; padding: 8px 12px; }
@media (min-width: 700px) {
	.cie-art .cie-art__patro { max-width: 680px; }
	.cie-art .cie-art__patro--cuadrado img { width: 96px; height: 96px; }
	.cie-art .cie-art__patro--ancho { grid-template-columns: auto 1fr auto; grid-template-areas: "logo txt et"; gap: 16px; padding: 12px 18px 12px 12px; }
	.cie-art .cie-art__patro--ancho img { height: 88px; max-width: 240px; }
	.cie-art .cie-art__patro--ancho .cie-art__patro-et { align-self: center; }
	.cie-art .cie-art__gracias--ancho { grid-template-columns: auto 1fr; }
	.cie-art .cie-art__gracias--ancho img { height: 112px; max-width: 280px; }
}

/* ---------- Sección sin patrocinador: hueco que invita a patrocinar (enlace a la landing) ---------- */
.cie-art .cie-art__patro-hueco { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 72px; height: 72px; flex: none; border: 2px dashed var(--t-acento-oscuro); border-radius: 12px; background: var(--t-acento-claro); color: var(--t-azul); font-size: 11px; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }
.cie-art .cie-art__patro--libre { border-style: dashed; border-color: var(--t-acento-oscuro); }
.cie-art .cie-art__patro--libre .cie-art__patro-et { background: var(--t-acento-claro); border-color: var(--t-acento-oscuro); color: var(--t-azul); }
.cie-art a.cie-art__patro--libre:hover { background: var(--t-acento-claro); border-color: var(--t-azul); }
.cie-art a.cie-art__patro--libre:hover .cie-art__patro-hueco { background: var(--t-acento); }
.cie-art .cie-art__gracias--libre { border: 2px dashed var(--t-acento-oscuro); }
/* Móvil: sin la etiqueta en la franja (el borde discontinuo ya lo dice) y, en la tarjeta, el hueco
   como banda a lo ancho con el texto debajo. */
.cie-art .cie-art__patro--libre .cie-art__patro-et { display: none; }
.cie-art .cie-art__gracias--libre { grid-template-columns: 1fr; }
.cie-art .cie-art__gracias--libre .cie-art__patro-hueco { flex-direction: row; gap: 8px; width: 100%; height: 64px; font-size: 12px; }
@media (min-width: 700px) {
	.cie-art .cie-art__patro--libre .cie-art__patro-hueco { width: 96px; height: 96px; }
	.cie-art .cie-art__patro--libre .cie-art__patro-et { display: inline-block; }
	.cie-art .cie-art__gracias--libre { grid-template-columns: auto 1fr; }
	.cie-art .cie-art__gracias--libre .cie-art__patro-hueco { flex-direction: column; gap: 2px; width: 136px; height: 136px; }
}