/* Artículos de la revista (contrato de HTML del agente: agentes/gem-articulos-cie.md).
 * Mismo lenguaje que las fichas: Nunito, azul para la estructura y las acciones, bordes en vez de
 * sombras, radio de 12 px, botones de 48 px. El color de la isla (submarca «Disfruta <Isla>») llega por
 * las variables --cie-acento* que pone cie-marca con la clase cie-isla-<slug> del <body>: al abrir otra
 * isla, sus artículos cambian de color sin tocar este archivo.
 * Prefijo body.single-post: gana a las reglas antiguas de Apariencia → Personalizar sin tocarlas. */

body.single-post {
	--a-azul: var(--cie-azul, #143E66);
	--a-azul-hover: var(--cie-azul-hover, #0F3050);
	--a-azul-50: var(--cie-azul-50, #EEF3F8);
	--a-azul-100: var(--cie-azul-100, #DCE6F0);
	--a-texto: var(--cie-texto, #16293D);
	--a-texto-2: var(--cie-texto-2, #3A4D62);
	--a-suave: var(--cie-texto-suave, #52657A);
	--a-borde: var(--cie-borde, #D5DFEA);
	--a-aviso: var(--cie-aviso, #9B2A22);
	--a-aviso-fondo: var(--cie-aviso-fondo, #FBEEEC);
	/* Submarca de la isla (sin isla: el azul claro de la marca principal). */
	--a-acento: var(--cie-acento, #DCE6F0);
	--a-acento-texto: var(--cie-acento-texto, #143E66);
	--a-acento-claro: var(--cie-acento-claro, #F5F8FB);
	--a-acento-borde: var(--cie-acento-borde, #E5ECF4);
	--a-acento-oscuro: var(--cie-acento-oscuro, #BDC6CE);
	--a-foco: 0 0 0 3px #fff, 0 0 0 5px var(--a-azul);
}

/* ---------- Texto base ---------- */
body.single-post .cie-articulo {
	font-family: var(--cie-fuente, 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif);
	font-size: 17px; line-height: 1.7; color: var(--a-texto);
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; /* minmax: una tabla ancha se desplaza en su caja, no ensancha la página. */
}
body.single-post .cie-articulo > * { margin-block: 0; }
body.single-post .cie-articulo :where(p, ul, ol) { margin: 0 0 16px; max-width: 70ch; }
body.single-post .cie-articulo :where(p, ul, ol):last-child { margin-bottom: 0; }
body.single-post .cie-articulo :where(ul, ol) { padding-left: 22px; }
body.single-post .cie-articulo li { margin: 0 0 8px; line-height: 1.65; }
body.single-post .cie-articulo strong { color: var(--a-texto); font-weight: 800; }
body.single-post .cie-articulo a { color: var(--a-azul); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.single-post .cie-articulo a:hover { color: var(--a-azul-hover); text-decoration-thickness: 2px; }
body.single-post .cie-articulo a:focus-visible { outline: none; box-shadow: var(--a-foco); border-radius: 4px; }
body.single-post .cie-articulo :where(h2, h3) { font-family: inherit; color: var(--a-azul); letter-spacing: -.01em; text-wrap: balance; }
body.single-post .cie-articulo h2 { font-size: 26px; font-weight: 800; line-height: 1.2; margin: 0 0 16px; }
body.single-post .cie-articulo h3 { font-size: 19px; font-weight: 800; line-height: 1.3; margin: 24px 0 8px; }

/* ---------- Entradilla ---------- */
body.single-post .cie-intro { font-size: 20px; line-height: 1.55; color: var(--a-texto); font-weight: 600; margin: 0 0 28px; max-width: 62ch; }

/* ---------- Secciones: rombo del isotipo en el color de la isla ---------- */
body.single-post .cie-seccion,
body.single-post .cie-conclusion { margin-top: 44px; }
body.single-post .cie-seccion > h2,
body.single-post .cie-conclusion > h2 { display: flex; align-items: baseline; gap: 12px; }
body.single-post .cie-seccion > h2::before,
body.single-post .cie-conclusion > h2::before {
	content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; transform: translateY(-3px) rotate(45deg);
	background: var(--a-acento); box-shadow: 0 0 0 1px var(--a-acento-oscuro);
}

/* ---------- Datos prácticos: la tarjeta de la submarca ---------- */
body.single-post .cie-datos-practicos {
	margin: 0 0 8px; padding: 20px; border-radius: 16px;
	background: var(--a-acento-claro); border: 1px solid var(--a-acento-borde); color: var(--a-texto);
}
body.single-post .cie-datos-practicos .cie-datos-practicos__titulo {
	display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--a-azul); margin: 0 0 16px;
}
body.single-post .cie-datos-practicos .cie-datos-practicos__titulo::before {
	content: ""; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--a-azul);
}
body.single-post .cie-datos-practicos__grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
body.single-post .cie-dato {
	background: #fff; border: 1px solid var(--a-acento-borde); border-radius: 12px; padding: 12px 14px;
	display: grid; gap: 2px; align-content: start;
}
body.single-post .cie-dato > :is(h3, .cie-dato__label) {
	margin: 0; font-size: 13px; line-height: 1.3; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a-suave);
}
body.single-post .cie-dato > :is(p, .cie-dato__value) { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--a-azul); max-width: none; }
body.single-post .cie-dato a { color: var(--a-azul); }
@media (min-width: 600px) {
	body.single-post .cie-datos-practicos { padding: 24px; }
	body.single-post .cie-datos-practicos__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) { body.single-post .cie-datos-practicos__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Notas: consejo (color de la isla) y aviso (color de estado) ---------- */
body.single-post .cie-nota {
	margin: 24px 0; padding: 16px 18px; border-radius: 12px; max-width: 70ch;
	background: var(--a-acento-claro); border: 1px solid var(--a-acento-borde);
}
body.single-post .cie-nota .cie-nota__titulo {
	margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a-azul);
}
/* El aviso se distingue por la forma (borde grueso) y no solo por el color: en islas de color cálido
   (Lanzarote) el consejo también es rojizo. */
body.single-post .cie-nota--aviso { background: #fff; border-color: var(--a-borde); border-left: 5px solid var(--a-aviso); border-radius: 4px 12px 12px 4px; }
body.single-post .cie-nota--aviso .cie-nota__titulo { color: var(--a-aviso); }

/* ---------- Tabla: se desplaza en su caja en el móvil ---------- */
body.single-post .cie-tabla { margin: 24px 0; overflow-x: auto; border: 1px solid var(--a-borde); border-radius: 12px; background: #fff; }
body.single-post .cie-tabla table { width: 100%; min-width: 480px; border-collapse: collapse; margin: 0; font-size: 15px; line-height: 1.45; border: 0; }
body.single-post .cie-tabla caption { caption-side: top; text-align: left; padding: 14px 16px 10px; font-size: 14px; font-weight: 700; color: var(--a-suave); }
body.single-post .cie-tabla :is(th, td) { text-align: left; vertical-align: top; padding: 12px 16px; border: 0; border-top: 1px solid var(--a-borde); background: none; }
body.single-post .cie-tabla thead th { background: var(--a-azul-50); color: var(--a-azul); font-weight: 800; font-size: 14px; border-top: 0; }
body.single-post .cie-tabla tbody tr:nth-child(even) td { background: #FAFBFD; }
body.single-post .cie-tabla td:first-child { font-weight: 700; color: var(--a-azul); }
/* Tablas sueltas de los artículos antiguos (sin .cie-tabla): en el móvil se salían y la página las
   recortaba. Pasan a tener su propio scroll horizontal. */
@media (max-width: 767px) {
	body.single-post table:not(.cie-tabla table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Cita: muesca de la isla ---------- */
body.single-post .cie-cita {
	margin: 28px 0; padding: 4px 0 4px 20px; border: 0; border-left: 4px solid var(--a-acento); max-width: 62ch; background: none;
	box-shadow: -1px 0 0 0 var(--a-acento-oscuro);
}
body.single-post .cie-cita p { font-size: 20px; line-height: 1.5; font-weight: 600; font-style: normal; color: var(--a-azul); margin: 0 0 8px; }
body.single-post .cie-cita cite { font-style: normal; font-size: 14px; font-weight: 700; color: var(--a-suave); }

/* ---------- Botones: los de las fichas ---------- */
body.single-post .cie-botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; max-width: none; }
body.single-post .cie-articulo a.cie-boton,
body.single-post a.cie-boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
	border-radius: 999px; background: var(--a-azul); border: 1px solid var(--a-azul); color: #fff;
	font-size: 16px; font-weight: 700; text-decoration: none; line-height: 1.2;
}
body.single-post a.cie-boton:is(:hover, :focus) { background: var(--a-azul-hover); border-color: var(--a-azul-hover); color: #fff; }
body.single-post a.cie-boton:active { transform: translateY(1px); }
body.single-post a.cie-boton:focus-visible { outline: none; box-shadow: var(--a-foco); }
body.single-post a.cie-boton.cie-boton--secundario { background: #fff; color: var(--a-azul); }
body.single-post a.cie-boton.cie-boton--secundario:is(:hover, :focus) { background: var(--a-azul-50); color: var(--a-azul); }

/* ---------- Preguntas frecuentes ---------- */
body.single-post .cie-faq { margin: 48px 0 0; padding: 0; background: none; border: 0; border-radius: 0; }
body.single-post .cie-faq > h2 { margin: 0 0 12px; }
body.single-post .cie-faq details { border-top: 1px solid var(--a-borde); }
body.single-post .cie-faq details:last-of-type { border-bottom: 1px solid var(--a-borde); }
body.single-post .cie-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0;
	cursor: pointer; list-style: none; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--a-azul);
}
body.single-post .cie-faq summary::-webkit-details-marker { display: none; }
body.single-post .cie-faq summary::after {
	content: ""; flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--a-azul-50) no-repeat center / 14px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23143E66' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	transition: transform .2s ease;
}
body.single-post .cie-faq details[open] summary::after { transform: rotate(45deg); }
body.single-post .cie-faq summary:focus-visible { outline: none; box-shadow: var(--a-foco); border-radius: 6px; }
body.single-post .cie-faq details > :not(summary) { margin: 0 0 16px; color: var(--a-texto-2); }

/* ---------- Conclusión ---------- */
body.single-post .cie-conclusion { padding: 24px 20px; border-radius: 16px; background: var(--a-azul-50); }
body.single-post .cie-conclusion > h2 { font-size: 22px; }

/* ---------- En la guía: filas enlazadas como en las fichas ---------- */
body.single-post .cie-enlaces { margin-top: 44px; }
body.single-post .cie-enlaces > h2 { font-size: 22px; }
body.single-post .cie-enlaces ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: none; }
body.single-post .cie-enlaces li { margin: 0; }
body.single-post .cie-articulo .cie-enlaces a {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 16px;
	border: 1px solid var(--a-borde); border-radius: 12px; background: #fff; color: var(--a-azul); text-decoration: none; font-weight: 700; line-height: 1.35;
}
body.single-post .cie-articulo .cie-enlaces a::after {
	content: ""; flex: none; width: 18px; height: 18px; background: no-repeat center / 18px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23143E66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
body.single-post .cie-articulo .cie-enlaces a:hover { border-color: var(--a-acento-oscuro); background: var(--a-acento-claro); color: var(--a-azul); }

/* ---------- Figuras ---------- */
body.single-post .cie-figura { margin: 28px 0; }
body.single-post .cie-figura img { display: block; width: 100%; height: auto; border-radius: 12px; }
body.single-post .cie-figura figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--a-suave); }
/* Mapa incrustado (Google My Maps): 4:3 en el móvil, 16:10 desde 600 px. */
body.single-post .cie-mapa { margin: 28px 0; scroll-margin-top: 96px; }
body.single-post .cie-mapa iframe { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: 12px; background: #eef1f4; }
@media (min-width: 600px) {
	body.single-post .cie-mapa iframe { aspect-ratio: 16 / 10; }
}

@media (max-width: 599px) {
	body.single-post .cie-articulo { font-size: 16px; }
	body.single-post .cie-intro { font-size: 18px; }
	body.single-post .cie-articulo h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
	body.single-post .cie-faq summary::after { transition: none; }
}

/* Artículos antiguos del grupo A con su propio <style> (eclipse, Oasis…): otra estructura dentro de
   cada dato (strong + span) y el título en h3, con colores pensados para un fondo oscuro. Se igualan. */
body.single-post .cie-datos-practicos > :is(h2, h3):not(.cie-datos-practicos__titulo) {
	margin: 0 0 16px; font-size: 20px; font-weight: 800; color: var(--a-azul); text-align: left;
}
body.single-post .cie-dato > strong { display: block; margin: 0; font-size: 13px; line-height: 1.3; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a-suave); }
body.single-post .cie-dato > span { display: block; margin: 0; font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--a-azul); }
body.single-post .cie-datos-practicos { background-image: none; box-shadow: none; }
body.single-post .cie-dato { box-shadow: none; transform: none; }