/* Treyder — artículo de blog: CTAs dentro del texto y artículos relacionados.
   Hilo #999999776 / aud#44. Solo se encola en entradas (inc/blog-articulo.php).
   Paleta y radios de theme.json: navy, cyan (verde marca), green, gray-*. */

.trey-cta { margin-block: 3rem; position: relative; overflow: hidden; }
.trey-cta p { margin: 0; }
.trey-cta .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; gap: .75rem; }
.trey-cta .wp-block-button { margin: 0; }
.trey-cta .wp-block-button__link { font-weight: 800; font-size: 1rem; text-decoration: none; padding: .9rem 1.6rem; border-radius: 999px; transition: transform .15s, box-shadow .15s, background .15s; }
.trey-cta .wp-block-button__link:hover { transform: translateY(-2px); }
.trey-cta__eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem !important; }
.trey-cta__titulo { font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }

/* 1 · PRODUCTO — tarjeta blanca con icono verde y sombra: se ve, pero no rompe la lectura. */
.trey-cta--linea {
	display: grid; grid-template-columns: 64px 1fr; column-gap: 1.25rem; align-items: center;
	background: #fff; border: 1px solid var(--wp--preset--color--gray-200); border-left: 6px solid var(--wp--preset--color--cyan);
	border-radius: 16px; padding: 1.5rem 1.75rem; box-shadow: 0 10px 30px rgba(17,20,24,.10);
}
.trey-cta--linea::before {
	content: ""; grid-row: 1 / span 3; width: 64px; height: 64px; border-radius: 16px;
	background: var(--wp--preset--color--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E") center / 32px no-repeat;
}
.trey-cta--linea .trey-cta__eyebrow { color: var(--wp--preset--color--cyan-600); }
.trey-cta--linea .trey-cta__titulo { color: var(--wp--preset--color--navy); font-size: 1.25rem; }
.trey-cta--linea .wp-block-buttons { margin-top: .9rem; }
.trey-cta--linea .wp-block-button__link { background: var(--wp--preset--color--navy); color: #fff; padding: .7rem 1.3rem; font-size: .95rem; }
.trey-cta--linea .wp-block-button__link:hover { background: var(--wp--preset--color--cyan-600); }

/* 2 · DEMO — la banda negra del sitio con halo verde, titular grande y botón verde. */
.trey-cta--tarjeta {
	background: radial-gradient(120% 140% at 100% 0%, rgba(64,161,123,.55) 0%, rgba(64,161,123,0) 55%), var(--wp--preset--color--navy);
	color: #fff; border-radius: 24px; padding: 2.75rem 2.5rem; box-shadow: 0 20px 50px rgba(17,20,24,.25);
}
.trey-cta--tarjeta::after {
	content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%;
	border: 2px solid rgba(127,227,189,.35); box-shadow: 0 0 0 30px rgba(127,227,189,.06), 0 0 0 60px rgba(127,227,189,.04); pointer-events: none;
}
.trey-cta--tarjeta .trey-cta__eyebrow { color: var(--wp--preset--color--green); }
.trey-cta--tarjeta .trey-cta__titulo { color: #fff; font-size: 2rem; max-width: 22ch; }
.trey-cta--tarjeta .trey-cta__checks { color: rgba(255,255,255,.85); margin-top: .9rem !important; font-weight: 600; }
.trey-cta--tarjeta .wp-block-button__link { background: var(--wp--preset--color--cyan); color: #fff; box-shadow: 0 8px 24px rgba(64,161,123,.45); font-size: 1.05rem; }
.trey-cta--tarjeta .wp-block-button__link:hover { background: var(--wp--preset--color--green); color: var(--wp--preset--color--navy); }

/* 3 · CIERRE — banda verde de marca, texto blanco, dos salidas. */
.trey-cta--cierre {
	background: linear-gradient(135deg, var(--wp--preset--color--cyan) 0%, var(--wp--preset--color--cyan-600) 100%);
	color: #fff; border-radius: 24px; padding: 2.5rem 2.5rem; text-align: center; box-shadow: 0 20px 50px rgba(42,118,89,.30);
}
.trey-cta--cierre .trey-cta__eyebrow { color: rgba(255,255,255,.85); }
.trey-cta--cierre .trey-cta__titulo { color: #fff; font-size: 1.9rem; }
.trey-cta--cierre .trey-cta__texto { color: rgba(255,255,255,.92); margin-top: .6rem !important; font-size: 1.05rem; }
.trey-cta--cierre .wp-block-buttons { justify-content: center; }
.trey-cta--cierre .wp-block-button__link { background: #fff; color: var(--wp--preset--color--navy); box-shadow: 0 8px 24px rgba(17,20,24,.18); }
.trey-cta--cierre .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border: 2px solid #fff; box-shadow: none; }

/* RELACIONADOS */
.trey-rel { max-width: 1100px; margin: 4rem auto 0; padding: 0 16px; }
.trey-rel__eyebrow { color: var(--wp--preset--color--cyan-600); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .25rem; }
.trey-rel__h { font-size: 1.6rem; font-weight: 800; margin: 0 0 1.5rem; color: var(--wp--preset--color--navy); }
.trey-rel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.trey-rel__card { display: flex; flex-direction: column; border: 1px solid var(--wp--preset--color--gray-200); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .2s, transform .2s; }
.trey-rel__card:hover { box-shadow: 0 4px 12px rgba(26,33,41,.10); transform: translateY(-2px); }
.trey-rel__img { display: block; aspect-ratio: 16 / 9; background: var(--wp--preset--color--gray-100); overflow: hidden; }
.trey-rel__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trey-rel__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.2rem; }
.trey-rel__title { font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--navy); }
.trey-rel__meta { font-size: .85rem; color: var(--wp--preset--color--gray-600); }

@media (max-width: 781px) {
	.trey-rel__grid { grid-template-columns: 1fr; }
	.trey-cta--linea { grid-template-columns: 1fr; padding: 1.25rem; }
	.trey-cta--linea::before { grid-row: auto; width: 48px; height: 48px; background-size: 24px; margin-bottom: .75rem; }
	.trey-cta--tarjeta, .trey-cta--cierre { padding: 2rem 1.4rem; border-radius: 20px; }
	.trey-cta--tarjeta .trey-cta__titulo, .trey-cta--cierre .trey-cta__titulo { font-size: 1.5rem; }
}