/* Plantilla de artículo del blog de Petsworld.
   Los colores, la tipografía Inter y los componentes compartidos (tarjeta 16:9, banda de
   tienda, cabecera de sección) vienen de petsworld-portada/portada.css, que se carga antes.
   Las reglas repiten la clase del body (.pw-articulo.pw-articulo) para pesar más que
   «body:not(.woocommerce-page) .site-inner h2/h3» del tema. */

.pw-articulo.pw-articulo .site-inner { padding-top: 0; }

/* El tema limita la columna a 720 px con «body.single:not(.single-product) #genesis-content»,
   que pesa más que cualquier clase por llevar un identificador. El artículo necesita 1200
   (720 de texto + 160 de hueco + 320 de índice). */
body.pw-articulo.pw-articulo.pw-articulo #genesis-content,
.pw-articulo.pw-articulo .content-sidebar-wrap { max-width: 1200px; width: 100%; }

.pw-articulo.pw-articulo .entry,
.pw-articulo.pw-articulo .entry-header,
.pw-articulo.pw-articulo .pw-art__grid,
.pw-articulo.pw-articulo .pw-art__tras {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Cabecera del artículo ---------- */
/* El tema separa la cabecera 5rem con «body.single:not(.single-product) .entry-header». */
body.pw-articulo.pw-articulo.pw-articulo .entry-header { padding: 40px 0 0; margin-bottom: 0; max-width: 1200px; }
.pw-articulo.pw-articulo .pw-art__cabecera { max-width: 720px; text-align: left; }
.pw-art__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-articulo.pw-articulo .pw-art__cat { text-decoration: none; }
.pw-art__cat {
	display: inline-block; padding: 4px 9px; border-radius: 6px; background: #E6EDF9; color: #012B7F;
	font-family: "InterPW", system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.pw-articulo.pw-articulo .entry-title,
.pw-articulo.pw-articulo h1.entry-title {
	margin: 16px 0 0; font-family: "InterPW", system-ui, sans-serif; font-size: 46px; line-height: 1.12;
	font-weight: 800; letter-spacing: -0.02em; color: #012B7F; text-wrap: balance; text-align: left;
}
.pw-art__entradilla {
	margin: 18px 0 0; font-family: "InterPW", system-ui, sans-serif; font-size: 20px; line-height: 1.55;
	font-weight: 500; color: #5A6468; text-wrap: pretty;
}
.pw-art__fecha {
	display: flex; align-items: center; gap: 8px; margin: 28px 0 0; padding: 16px 0;
	border-top: 1px solid #B9C3D9; border-bottom: 1px solid #B9C3D9;
	font-family: "InterPW", system-ui, sans-serif; font-size: 15px; color: #5A6468;
}
.pw-art__fecha svg { width: 16px; height: 16px; color: #012B7F; flex: none; }
.pw-art__fecha time { font-weight: 700; color: #293133; }

/* ---------- Rejilla: texto 720 + índice 320 ---------- */
.pw-art__grid {
	display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 320px); justify-content: space-between;
	gap: 160px; align-items: start; padding-top: 36px;
}
.pw-art__texto { min-width: 0; }

/* ---------- Índice ---------- */
.pw-art__indice { position: sticky; top: 32px; font-family: "InterPW", system-ui, sans-serif; }
.pw-art__indice-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #012B7F; }
.pw-articulo.pw-articulo .pw-art__indice ol { margin: 10px 0 0; padding: 0; list-style: none; border-top: 2px solid #012B7F; }
.pw-articulo.pw-articulo .pw-art__indice li { margin: 0; padding: 0; list-style: none; }
.pw-articulo.pw-articulo .pw-art__indice li::before,
.pw-articulo.pw-articulo .pw-art__indice li::marker { content: none; }
.pw-art__indice a {
	display: block; padding: 13px 14px; border-bottom: 1px solid #B9C3D9; border-left: 3px solid transparent;
	font-size: 15px; line-height: 1.35; color: #293133; text-decoration: none; transition: color 140ms ease, background-color 140ms ease;
}
.pw-art__indice a:hover { color: #008EE0; background: #F4F7FD; }
.pw-art__indice a.pw-activo { border-left-color: #012B7F; font-weight: 700; color: #012B7F; background: #F4F7FD; }
.pw-art__indice-movil { display: none; }

/* ---------- Cuerpo del artículo ---------- */
.pw-articulo.pw-articulo .entry-content { font-family: "InterPW", system-ui, sans-serif; color: #293133; }
.pw-articulo.pw-articulo .entry-content p { margin: 0 0 20px; font-size: 18px; line-height: 1.7; color: #293133; }
.pw-articulo.pw-articulo .entry-content h2 {
	margin: 48px 0 18px; font-size: 28px; line-height: 1.25; font-weight: 700; color: #012B7F; letter-spacing: -0.01em; scroll-margin-top: 90px;
}
.pw-articulo.pw-articulo .entry-content h3 {
	margin: 32px 0 12px; font-size: 21px; line-height: 1.3; font-weight: 700; color: #293133; letter-spacing: 0;
}
.pw-articulo.pw-articulo .entry-content a {
	color: #012B7F; font-weight: 600; text-decoration: underline; text-decoration-color: #9FC3FF;
	text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 140ms ease;
}
.pw-articulo.pw-articulo .entry-content a:hover { color: #008EE0; }
.pw-articulo.pw-articulo .entry-content img { border-radius: 12px; }
.pw-articulo.pw-articulo .entry-content figure { margin: 28px 0; }
.pw-articulo.pw-articulo .entry-content figcaption { margin-top: 10px; font-size: 13px; color: #8A94A6; }

/* Listas: viñeta cuadrada azul, salvo cuando el propio elemento empieza por emoji. */
.pw-articulo.pw-articulo .entry-content ul,
.pw-articulo.pw-articulo .entry-content ol { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
/* El tema pone «list-style-type» en el propio li, así que hay que anularlo ahí:
   si no, el punto nativo se suma a la viñeta cuadrada. */
.pw-articulo.pw-articulo .entry-content li {
	position: relative; padding-left: 22px; font-size: 18px; line-height: 1.7; list-style: none;
}
.pw-articulo.pw-articulo .entry-content ul > li::before {
	content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 2px; background: #012B7F;
}
.pw-articulo.pw-articulo .entry-content ol { counter-reset: pw; }
.pw-articulo.pw-articulo .entry-content ol > li { counter-increment: pw; }
.pw-articulo.pw-articulo .entry-content ol > li::before {
	content: counter(pw) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: #012B7F;
}
.pw-articulo.pw-articulo .entry-content .has-emoji > li { padding-left: 34px; text-indent: -34px; }
.pw-articulo.pw-articulo .entry-content .has-emoji > li::before { content: none; }

/* ---------- Etiquetas ---------- */
.pw-art__etiquetas {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 720px;
	margin: 48px 0 0; padding-top: 20px; border-top: 2px solid #012B7F;
	font-family: "InterPW", system-ui, sans-serif;
}
.pw-art__etiquetas-rotulo { font-size: 14px; font-weight: 600; color: #5A6468; }
.pw-art__chip {
	display: inline-block; padding: 8px 14px; border: 1px solid #012B7F; border-radius: 6px;
	font-size: 14px; font-weight: 600; color: #012B7F; transition: background-color 140ms ease;
}
.pw-art__chip:hover { background: #D9E6FF; }
.pw-art__chip--guia { border-color: #A8530C; color: #A8530C; background: #FFF1DE; }
.pw-art__chip--guia:hover { background: #FFE6C7; }

/* ---------- Bloques tras el contenido ---------- */
.pw-art__tras { padding: 0; }
.pw-art__relacionados { padding: 64px 0 16px; max-width: 1200px; margin: 0 auto; }
.pw-art__comentarios { max-width: 720px; margin: 0; padding: 64px 0 24px; font-family: "InterPW", system-ui, sans-serif; }

/* La banda de tienda va a sangre, como en la portada. */
.pw-articulo.pw-articulo .pw-verde { margin-top: 64px; }

/* ---------- Comentarios ---------- */
/* Genesis los imprime fuera de mis contenedores, así que la separación va aquí. */
.pw-articulo.pw-articulo .comment-respond,
.pw-articulo.pw-articulo .entry-comments {
	max-width: 1200px; margin: 48px 0 0; padding-bottom: 24px;
	font-family: "InterPW", system-ui, sans-serif;
}
.pw-articulo.pw-articulo .entry-comments + .comment-respond,
.pw-articulo.pw-articulo .comment-respond:last-child { padding-bottom: 64px; }
.pw-articulo.pw-articulo .comment-reply-title,
.pw-articulo.pw-articulo .entry-comments h3 {
	display: flex; align-items: center; gap: 24px; font-size: 28px; font-weight: 700; color: #012B7F; letter-spacing: -0.015em;
}
.pw-articulo.pw-articulo .comment-reply-title::after,
.pw-articulo.pw-articulo .entry-comments h3::after { content: ""; flex: 1; height: 1px; background: #B9C3D9; }
/* La regla del título llega hasta el final, como en «Sigue leyendo»; el formulario se queda
   en la anchura de la columna de texto. */
.pw-articulo.pw-articulo .comment-form,
.pw-articulo.pw-articulo .comment-notes,
.pw-articulo.pw-articulo .comment-list,
.pw-articulo.pw-articulo .comment-form-cookies-consent { max-width: 720px; }

.pw-articulo.pw-articulo .comment-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #293133; }
.pw-articulo.pw-articulo .comment-form input[type="text"],
.pw-articulo.pw-articulo .comment-form input[type="email"],
.pw-articulo.pw-articulo .comment-form input[type="url"],
.pw-articulo.pw-articulo .comment-form textarea {
	width: 100%; padding: 0 14px; border: 1px solid #B9C3D9; border-radius: 6px; background: #fff;
	font-family: inherit; font-size: 16px; color: #293133; height: 46px;
}
.pw-articulo.pw-articulo .comment-form textarea { height: 140px; padding: 12px 14px; line-height: 1.6; }
.pw-articulo.pw-articulo .comment-form input:focus,
.pw-articulo.pw-articulo .comment-form textarea:focus { border-color: #008EE0; outline: 2px solid #008EE0; outline-offset: 2px; }
.pw-articulo.pw-articulo .comment-form .form-submit input[type="submit"] {
	width: auto; height: auto; padding: 14px 26px; border: 0; border-radius: 6px; background: #012B7F; color: #fff;
	font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color 140ms ease;
}
.pw-articulo.pw-articulo .comment-form .form-submit input[type="submit"]:hover { background: #0A3FA8; }
.pw-articulo.pw-articulo .comment-form-cookies-consent label { display: inline; font-weight: 400; color: #5A6468; }

.pw-articulo.pw-articulo *:focus-visible { outline: 2px solid #008EE0; outline-offset: 2px; }

/* ---------- Puntos de ruptura ---------- */
@media (max-width: 1180px) {
	.pw-art__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
	.pw-articulo.pw-articulo .entry-header,
	.pw-art__grid, .pw-art__relacionados { padding-left: 24px; padding-right: 24px; }
	.pw-art__etiquetas, .pw-art__comentarios { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 860px) {
	.pw-art__grid { grid-template-columns: 1fr; gap: 0; }
	.pw-art__indice { display: none; }
	.pw-art__indice-movil { display: block; margin: 0 0 28px; font-family: "InterPW", system-ui, sans-serif; }
	.pw-art__indice-movil summary {
		display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px;
		border: 1px solid #012B7F; border-radius: 6px; font-size: 15px; font-weight: 700; color: #012B7F; cursor: pointer; list-style: none;
	}
	.pw-art__indice-movil summary::-webkit-details-marker { display: none; }
	.pw-articulo.pw-articulo .pw-art__indice-movil ol { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid #B9C3D9; }
	.pw-articulo.pw-articulo .pw-art__indice-movil li { padding: 0; list-style: none; }
	.pw-articulo.pw-articulo .pw-art__indice-movil li::before { content: none; }
	.pw-art__indice-movil a { display: block; min-height: 44px; padding: 12px 16px; border-bottom: 1px solid #B9C3D9; font-size: 15px; color: #293133; }
	.pw-articulo.pw-articulo .entry-title, .pw-articulo.pw-articulo h1.entry-title { font-size: 30px; line-height: 1.15; }
	.pw-art__entradilla { font-size: 17px; }
	.pw-art__fecha { flex-wrap: wrap; font-size: 14px; }
	.pw-articulo.pw-articulo .entry-content p,
	.pw-articulo.pw-articulo .entry-content li { font-size: 17px; }
	.pw-articulo.pw-articulo .entry-content h2 { font-size: 23px; margin-top: 36px; }
	.pw-articulo.pw-articulo .entry-content h3 { font-size: 19px; }
	.pw-art__chip { min-height: 44px; display: inline-flex; align-items: center; }
	.pw-articulo.pw-articulo .entry-header,
	.pw-art__grid, .pw-art__relacionados, .pw-art__etiquetas, .pw-art__comentarios { padding-left: 20px; padding-right: 20px; }
	.pw-articulo.pw-articulo .comment-form input[type="text"],
	.pw-articulo.pw-articulo .comment-form input[type="email"] { height: 48px; }
	.pw-articulo.pw-articulo .comment-form .form-submit input[type="submit"] { width: 100%; }
	.pw-articulo.pw-articulo .comment-reply-title,
	.pw-articulo.pw-articulo .entry-comments h3 { font-size: 23px; }
}

/* El índice vive dentro del área de contenido, así que hay que anular en él las
   viñetas y la numeración que se aplican a las listas del artículo. Va al final
   para ganar a las reglas de arriba, que tienen el mismo peso. */
.pw-articulo.pw-articulo .pw-art__indice ol > li::before,
.pw-articulo.pw-articulo .pw-art__indice-movil ol > li::before { content: none; }
.pw-articulo.pw-articulo .pw-art__indice ol > li,
.pw-articulo.pw-articulo .pw-art__indice-movil ol > li { padding-left: 0; text-indent: 0; font-size: 15px; line-height: 1.35; }
.pw-articulo.pw-articulo .pw-art__indice ol,
.pw-articulo.pw-articulo .pw-art__indice-movil ol { display: block; }

/* En escritorio, nombre y correo comparten fila, como en el diseño. */
@media (min-width: 861px) {
	.pw-articulo.pw-articulo .comment-form .comment-form-author,
	.pw-articulo.pw-articulo .comment-form .comment-form-email { float: left; width: calc(50% - 6px); }
	.pw-articulo.pw-articulo .comment-form .comment-form-author { margin-right: 12px; }
	.pw-articulo.pw-articulo .comment-form .comment-form-url,
	.pw-articulo.pw-articulo .comment-form .comment-form-cookies-consent,
	.pw-articulo.pw-articulo .comment-form .form-submit { clear: both; }
}

/* El tema pinta de blanco el bloque de comentarios; en el artículo va sobre el crema. */
.pw-articulo.pw-articulo .comment-respond,
.pw-articulo.pw-articulo .entry-comments,
.pw-articulo.pw-articulo .entry-pings { background: transparent; }