/* ==========================================================================
   Kopaitic — estilos de componentes
   Colores, fuentes y tamaños vienen de theme.json (variables --wp--preset--*).
   ========================================================================== */

:root {
	--k-navy: var(--wp--preset--color--navy);
	--k-deep: var(--wp--preset--color--navy-deep);
	--k-red: var(--wp--preset--color--red);
	--k-ink: var(--wp--preset--color--ink);
	--k-muted: var(--wp--preset--color--muted);
	--k-line: var(--wp--preset--color--line);
	--k-mist: var(--wp--preset--color--mist);
	--k-display: var(--wp--preset--font-family--display);
	--k-section-y: var(--wp--preset--spacing--60);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.k-main > * { margin-block-start: 0; }

/* ---------- Encabezado ---------- */
.k-site-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .k-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .k-site-header { top: 0; } }
.k-header { padding-block: 0.9rem; box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.k-header__bar { gap: 1.5rem; }
.k-header__nav { gap: 1.75rem; }
.k-header .wp-block-site-logo img { filter: brightness(0) invert(1); }
.k-menu .wp-block-navigation-item__content { color: inherit; text-decoration: none; opacity: 0.88; }
.k-menu .wp-block-navigation-item__content:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--k-red); }
.k-menu .wp-block-navigation__submenu-container {
	background: var(--k-deep) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	padding: 0.5rem 0;
	min-width: 17rem !important;
}
.k-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.55rem 1.1rem; }
.k-btn-sm .wp-block-button__link { padding: 0.6rem 1.1rem; font-size: var(--wp--preset--font-size--x-small); }
@media (max-width: 900px) { .k-header__cta { display: none; } }

/* ---------- Textos de apoyo ---------- */
.k-eyebrow {
	display: flex; align-items: center; gap: 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--k-red);
	margin-block-end: 0.75rem;
}
.k-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.has-navy-background-color .k-eyebrow,
.has-navy-deep-background-color .k-eyebrow { color: #f0a097; }
.k-eyebrow a { color: inherit; text-decoration: none; }

/* ---------- Secciones ---------- */
.k-section { padding-block: var(--k-section-y); }
.k-section__head { margin-block-end: var(--wp--preset--spacing--50); }
.k-section__head > * { margin-inline-start: 0 !important; }
.has-navy-background-color h1, .has-navy-background-color h2, .has-navy-background-color h3,
.has-navy-deep-background-color h1, .has-navy-deep-background-color h2, .has-navy-deep-background-color h3,
.has-red-background-color h2 { color: #fff; }
.has-navy-background-color a:not(.wp-element-button),
.has-navy-deep-background-color a:not(.wp-element-button),
.has-red-background-color a:not(.wp-element-button) { color: #fff; }

/* ---------- Hero ---------- */
.k-hero { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); overflow: hidden; }
.k-hero__cols { gap: var(--wp--preset--spacing--50) !important; }
.k-hero__title { font-size: var(--wp--preset--font-size--xx-large); font-weight: 500; margin-block: 0 1.25rem; }
.k-hero__title em { font-style: italic; color: #c9cde6; font-weight: 500; }
.k-hero__lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: #d7daea; max-width: 36rem; }
.k-hero__actions { margin-block-start: 2rem; }
.k-hero__photo { margin: 0; }
.k-hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; display: block; }
.k-hero__photo { order: 0; }
@media (max-width: 781px) {
	.k-hero__photo img { aspect-ratio: 4 / 3; object-position: center 20%; }
	.k-hero__lead { font-size: var(--wp--preset--font-size--medium); }
}
.k-btn-light .wp-block-button__link { color: #fff !important; border: 1px solid rgba(255,255,255,0.55) !important; background: transparent !important; }
.k-btn-light .wp-block-button__link:hover { border-color: #fff !important; background: rgba(255,255,255,0.08) !important; }

.k-stats { gap: 0 !important; margin-block-start: var(--wp--preset--spacing--50); border-top: 1px solid rgba(255,255,255,0.18); }
.k-stat { padding: 1.1rem 2rem 0 0; margin: 0 !important; min-width: 9rem; }
.k-stat + .k-stat { padding-left: 2rem; border-left: 1px solid rgba(255,255,255,0.18); }
.k-stat__num { font-family: var(--k-display); font-size: 2.6rem; line-height: 1; margin: 0; color: #fff; font-variant-numeric: lining-nums; }
.k-stat__label { font-size: var(--wp--preset--font-size--x-small); color: #b9bdd6; margin: 0.4rem 0 0; }
@media (max-width: 600px) {
	.k-stat { flex: 1 1 100%; padding: 0.9rem 0 0; }
	.k-stat + .k-stat { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
}

/* ---------- Franja de plazo ---------- */
.k-plazo { padding-block: 1rem; }
.k-plazo__row { gap: 1rem 2rem; }
.k-plazo__text { margin: 0; flex: 1 1 32rem; font-size: var(--wp--preset--font-size--small); }
.k-plazo__link { margin: 0; font-weight: 600; white-space: nowrap; }
.k-plazo__link a { text-underline-offset: 4px; }

/* ---------- Tarjetas de áreas / herramientas ---------- */
.k-areas__grid, .k-tools__grid, .k-hip__grid { gap: 0 !important; border-top: 1px solid var(--k-line); border-left: 1px solid var(--k-line); }
.k-area, .k-tool, .k-hip__item {
	margin: 0 !important;
	padding: 1.75rem 1.75rem 2rem;
	border-right: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line);
	background: #fff;
	transition: background-color .2s ease;
}
.k-area:hover, .k-tool:hover { background: var(--k-mist); }
.k-area__ref { font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-muted); margin: 0 0 0.9rem; }
.k-area__ref a { color: inherit; text-decoration: none; }
.k-area__title, .k-tool__title { font-size: 1.6rem; margin: 0 0 0.6rem; }
.k-area__title a { color: var(--k-navy); text-decoration: none; }
.k-area__title a::after { content: " →"; color: var(--k-red); font-family: var(--wp--preset--font-family--body); font-size: 0.8em; }
.k-area__title a:hover { color: var(--k-red); }
.k-area__text, .k-tool__text { color: var(--k-muted); font-size: var(--wp--preset--font-size--small); margin: 0; }
.k-tool__link { margin: 1rem 0 0; font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.k-tool__link a { text-decoration: none; color: var(--k-red); }
.k-hip__note { margin-block-start: 1.5rem; }


/* ---------- Problema (StoryBrand) ---------- */
.k-problema__cols { gap: var(--wp--preset--spacing--60) !important; }
.k-problema__lead { color: var(--k-muted); font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
.k-checks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--k-line); }
.k-checks li { position: relative; padding: 1rem 0 1rem 2rem; border-bottom: 1px solid var(--k-line); }
.k-checks li::before { content: ""; position: absolute; left: 0.2rem; top: 1.45rem; width: 0.7rem; height: 0.7rem; border: 2px solid var(--k-red); transform: rotate(45deg); }
.k-problema__close { margin-block-start: 1.5rem; }

/* ---------- Proceso en 3 pasos ---------- */
.k-steps { gap: 1.2rem !important; }
.k-step { margin: 0 !important; padding: 1.25rem 1.5rem 0 0; border-top: 2px solid var(--k-navy); }
.k-step__num { font-family: var(--k-display); font-size: 3.25rem; line-height: 1; color: var(--k-red); margin: 0 0 0.75rem; }
.k-step__title { font-size: 1.6rem; margin: 0 0 0.5rem; }
.k-step__text { color: var(--k-muted); font-size: var(--wp--preset--font-size--small); margin: 0; }
.k-proceso__cta { margin-block-start: var(--wp--preset--spacing--50); }
.k-estudio__empatia { font-family: var(--k-display); font-size: var(--wp--preset--font-size--large); font-style: italic; color: var(--k-navy); }


/* ---------- Beneficios ---------- */
.k-benefits { gap: 1.2rem !important; }
.k-benefit { margin: 0 !important; padding: 0 1.5rem 1.5rem 0; }
.k-benefit__title { font-size: 1.45rem; margin: 0 0 0.4rem; padding-top: 1rem; border-top: 1px solid var(--k-line); }
.k-benefit__text { color: var(--k-muted); font-size: var(--wp--preset--font-size--small); margin: 0; }

/* ---------- Estudio ---------- */
.k-estudio__cols { gap: var(--wp--preset--spacing--60) !important; }
.k-facts { list-style: none; padding: 0; margin-block-start: 2rem; border-top: 1px solid var(--k-line); }
.k-facts li { padding: 0.9rem 0; border-bottom: 1px solid var(--k-line); font-size: var(--wp--preset--font-size--small); }
.k-team { gap: 1.2rem !important; }
.k-person { margin: 0 !important; }
.k-person__photo { margin: 0 0 1rem; }
.k-person__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block; filter: grayscale(0.15); }
.k-person__name { font-size: 1.5rem; margin: 0; }
.k-person__role { font-size: var(--wp--preset--font-size--small); color: var(--k-muted); margin: 0.25rem 0 0; }

/* ---------- Honorarios ---------- */
.k-honorarios__title { font-size: var(--wp--preset--font-size--x-large); font-weight: 500; }
.k-honorarios p { color: #d7daea; }

/* ---------- FAQ / acordeones (bloque Detalles) ---------- */
.k-faq__item { border-bottom: 1px solid var(--k-line); padding: 0; margin: 0 !important; }
.k-faq__item:first-of-type { border-top: 1px solid var(--k-line); margin-block-start: 1.5rem !important; }
.k-faq__item summary {
	cursor: pointer; list-style: none;
	padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
	font-weight: 600; color: var(--k-navy);
}
.k-faq__item summary::-webkit-details-marker { display: none; }
.k-faq__item summary::after {
	content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; font-weight: 400; color: var(--k-red); line-height: 1;
}
.k-faq__item[open] summary::after { content: "–"; }
.k-faq__item summary:focus-visible { outline: 2px solid var(--k-red); outline-offset: 4px; }
.k-faq__item > p { margin: 0 0 1.25rem; color: var(--k-muted); }

/* ---------- Llamado final ---------- */
.k-cta__title { font-size: var(--wp--preset--font-size--x-large); font-weight: 500; }
.k-cta__lead { color: #d7daea; font-size: var(--wp--preset--font-size--large); }
.k-cta__note { color: #aeb3cf; font-size: var(--wp--preset--font-size--x-small); margin-block-start: 1.5rem; }

/* ---------- Cabecera de páginas ---------- */
.k-pagehead { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
.k-pagehead__title { font-weight: 500; max-width: 22ch; color: #fff; margin-block: 0; }
.k-pagehead--post .k-pagehead__title { font-size: var(--wp--preset--font-size--x-large); max-width: none; }
.k-pagehead--ciudad .k-hero__lead { margin-block-start: 1.25rem; }
.k-pagehead--ciudad .wp-block-buttons { margin-block-start: 2rem; }
.k-pagehead__meta { color: #b9bdd6; font-size: var(--wp--preset--font-size--x-small); margin-block-start: 1rem; }
.k-pagehead .wp-block-post-terms.k-eyebrow a { color: inherit; }
.k-body { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.k-catlist { list-style: none; padding: 0; margin-block-start: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.k-catlist li a { display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid rgba(255,255,255,0.35); color: #fff; text-decoration: none; font-size: var(--wp--preset--font-size--x-small); }
.k-catlist li a:hover { background: rgba(255,255,255,0.1); }

/* ---------- Listado de entradas ---------- */
.k-cards { gap: 0 !important; border-top: 1px solid var(--k-line); border-left: 1px solid var(--k-line); }
.k-cards > li { margin: 0 !important; }
.k-card { height: 100%; padding: 1.5rem 1.5rem 1.75rem; border-right: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); }
.k-card__title { font-size: 1.4rem; margin: 0 0 0.6rem; }
.k-card__title a { color: var(--k-navy); text-decoration: none; }
.k-card__title a:hover { color: var(--k-red); }
.k-card__text { color: var(--k-muted); font-size: var(--wp--preset--font-size--small); }
.k-card__text .wp-block-post-excerpt__excerpt { margin: 0; }
.k-card__date { font-size: var(--wp--preset--font-size--x-small); color: var(--k-muted); margin-block-start: 1rem; }
.k-postcta { margin-block-start: var(--wp--preset--spacing--50); padding: 1.25rem 1.5rem; background: var(--k-mist); border-left: 3px solid var(--k-red); }
.k-postcta p { margin: 0; }
.k-postnav { margin-block-start: 2rem; font-size: var(--wp--preset--font-size--small); }

/* ---------- Pie ---------- */
.k-footer { padding-block: var(--wp--preset--spacing--60) 1.5rem; font-size: var(--wp--preset--font-size--small); }
.k-footer .wp-block-site-logo img { filter: brightness(0) invert(1); }
.k-footer__lead, .k-footer__contact { color: #b9bdd6; }
.k-footer__title { color: #fff !important; font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.14em; text-transform: uppercase; }
.k-footer__list { list-style: none; padding: 0; margin: 0; }
.k-footer__list li { padding: 0.25rem 0; }
.k-footer a { color: #dfe2f0; text-decoration: none; }
.k-footer a:hover { color: #fff; text-decoration: underline; }
.k-footer__legal { margin-block-start: var(--wp--preset--spacing--50); padding-block-start: 1.25rem; border-top: 1px solid rgba(255,255,255,0.12); color: #8f94b3; font-size: var(--wp--preset--font-size--x-small); }
.k-footer__legal p { margin: 0; }

/* ---------- Botón WhatsApp ---------- */
.k-wa {
	position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.75rem 1.1rem 0.75rem 0.9rem; border-radius: 999px;
	background: var(--wp--preset--color--whatsapp); color: #fff !important; text-decoration: none !important;
	font-weight: 600; font-size: 0.9rem;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.k-wa:hover { filter: brightness(1.08); }
.k-wa:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 3px; }
@media (max-width: 600px) { .k-wa span { display: none; } .k-wa { padding: 0.8rem; } }

/* ---------- Contenido antiguo migrado ---------- */
/* Evita que HTML pegado con anchos fijos rompa el diseño en móvil. */
.wp-block-post-content img { height: auto; }
.wp-block-post-content table { display: block; overflow-x: auto; }

/* ---------- Páginas armadas con HTML propio (plantillas Página libre y Perfil) ---------- */
/* Dejan que sus secciones usen todo el ancho, como fueron diseñadas. */
.page-template-page-landing .wp-block-post-content > *,
.page-template-page-perfil .wp-block-post-content > *,
.wp-block-post-content :is(.kct, .kco, .kfc-wrap, .kek-wrap, .kya-wrap) {
	max-width: none !important;
	width: 100% !important;
	left: auto !important;
	right: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.page-template-page-landing .wp-block-post-content,
.page-template-page-perfil .wp-block-post-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Los trucos de "100vw" del HTML antiguo no deben generar barra horizontal. */
.wp-site-blocks { overflow-x: clip; }