/* JC Business IA — estilos complementarios a theme.json.
   Principio: sobriedad. El único elemento distintivo es el sistema de «estado»
   (disponible / en desarrollo / previsto), que hace visible la honestidad del producto. */

:root {
	--jcb-radius: 6px;
	--jcb-line: var(--wp--preset--color--linea);
	--jcb-focus: #0B5C61;
}

html { scroll-padding-top: 1rem; }
body { -webkit-text-size-adjust: 100%; overflow-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; }

/* Foco visible y coherente */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--jcb-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
.skip-link.screen-reader-text:focus { background: #fff; color: var(--wp--preset--color--tinta); padding: .75rem 1rem; z-index: 100000; }

/* ---------- Cabecera ---------- */
.jcb-header { border-bottom: 1px solid var(--jcb-line); background: var(--wp--preset--color--marfil); }
.jcb-header__bar { gap: 1rem; }
.jcb-header__nav { gap: 1.25rem; }
.jcb-brand, .jcb-brand a { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--wp--preset--color--tinta); text-decoration: none; margin: 0; }
.jcb-header .wp-block-navigation a { text-decoration: none; }
.jcb-header .wp-block-navigation a:hover { text-decoration: underline; }
.jcb-header .wp-block-navigation__submenu-container { border: 1px solid var(--jcb-line) !important; border-radius: var(--jcb-radius); padding: .4rem 0; min-width: 16rem !important; }
.jcb-header .wp-block-navigation .wp-block-navigation-item__content { padding: .45rem .9rem; }
.jcb-header__cta .wp-block-button__link { padding: .6rem 1rem; font-size: .9375rem; white-space: nowrap; }
@media (max-width: 599px) {
	.jcb-header__cta { display: none; } /* El CTA del diagnóstico vuelve a aparecer en el menú móvil y en cada página */
}
.wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 1rem; }
.jcb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; padding: .25rem 0 0 1rem !important; min-width: 0 !important; }

/* ---------- Migas de pan ---------- */
.jcb-crumbs { padding-top: 1.25rem; }
.jcb-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .9375rem; color: var(--wp--preset--color--tinta-suave); }
.jcb-breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--wp--preset--color--tinta-suave); }
.jcb-breadcrumbs a { color: var(--wp--preset--color--tinta-suave); }
.jcb-breadcrumbs [aria-current="page"] { color: var(--wp--preset--color--tinta); }

/* ---------- Secciones ---------- */
.wp-block-post-content > .jcb-section { margin-block: 0; }
.jcb-section { padding-block: var(--wp--preset--spacing--50); }
.jcb-section + .jcb-section { border-top: 1px solid var(--jcb-line); }
.jcb-section--alt { background: var(--wp--preset--color--blanco); }
.jcb-section > h2:first-child { margin-top: 0; }
.jcb-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--tinta-suave); max-width: 40rem; }
/* Medida de lectura: el layout constrained centra los hijos (margin auto con !important).
   Se limita el ancho y se alinea a la izquierda de la columna de 72rem sobrescribiendo
   esos márgenes; los porcentajes se calculan sobre el ancho del contenedor. */
.jcb-section > :is(p:not(.jcb-estado), ul, ol, .wp-block-details) { max-width: 46rem; margin-left: max(0px, calc((100% - 72rem) / 2)) !important; margin-right: auto !important; }
.jcb-section > .wp-block-heading { max-width: 56rem; margin-left: max(0px, calc((100% - 72rem) / 2)) !important; margin-right: auto !important; }
.jcb-section > p.jcb-lead { max-width: 40rem; }
.jcb-section > .jcb-estado { margin-left: max(0px, calc((100% - 72rem) / 2)) !important; margin-right: auto !important; }

/* Hero */
.jcb-hero { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
.jcb-hero h1 { max-width: 18ch; margin-top: 0; }
.jcb-hero .wp-block-columns { gap: clamp(2rem, 5vw, 4rem); align-items: flex-start; }

/* Panel de dos recorridos (hero de portada) */
.jcb-routes { border: 1px solid var(--jcb-line); border-radius: var(--jcb-radius); background: var(--wp--preset--color--blanco); padding: 1.25rem 1.4rem; }
.jcb-routes h2 { font-size: 1rem; margin: 0 0 .35rem; }
.jcb-routes ul { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.jcb-routes ul:last-child { margin-bottom: 0; }
.jcb-routes li { margin: .2rem 0; }

/* Bloques de servicio o módulo: regla lateral en lugar de tarjetas con sombra */
.jcb-item { border-left: 3px solid var(--wp--preset--color--petroleo); padding-left: 1rem; }
.jcb-item h3 { margin: 0 0 .4rem; }
.jcb-item p { margin: .3rem 0; }
.jcb-grid.wp-block-columns { gap: 2rem 2.5rem; flex-wrap: wrap !important; }
.jcb-grid > .wp-block-column { flex: 1 1 15rem !important; }

/* Pasos de método: sí es una secuencia, se numera */
.jcb-steps { counter-reset: paso; list-style: none; padding: 0; }
.jcb-steps > li { counter-increment: paso; position: relative; padding-left: 2.75rem; margin-bottom: 1rem; }
.jcb-steps > li::before { content: counter(paso); position: absolute; left: 0; top: .05rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--wp--preset--color--petroleo); color: var(--wp--preset--color--petroleo); font-weight: 700; display: grid; place-items: center; font-size: .9rem; }

/* ---------- Estado de producto (elemento distintivo) ---------- */
.jcb-estado { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; border: 1px solid currentColor; width: fit-content; }
.jcb-estado::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.jcb-estado--desarrollo { color: var(--wp--preset--color--ambar-texto); background: var(--wp--preset--color--ambar-fondo); }
.jcb-estado--previsto { color: var(--wp--preset--color--tinta-suave); background: transparent; border-style: dashed; }
.jcb-estado--previsto::before { background: transparent; border: 2px solid currentColor; box-sizing: border-box; }
.jcb-estado--disponible { color: var(--wp--preset--color--petroleo); background: var(--wp--preset--color--petroleo-claro); }

.jcb-nota { font-size: .9375rem; color: var(--wp--preset--color--tinta-suave); border-left: 3px solid var(--jcb-line); padding-left: .9rem; }
.jcb-concepto { font-size: .875rem; color: var(--wp--preset--color--tinta-suave); font-style: italic; }

/* ---------- Tablas ---------- */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; min-width: 32rem; background: var(--wp--preset--color--blanco); }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--jcb-line); padding: .6rem .75rem; text-align: left; vertical-align: top; }
.wp-block-table thead th { background: var(--wp--preset--color--petroleo-claro); font-weight: 650; }

/* ---------- Preguntas ---------- */
.wp-block-details summary { cursor: pointer; font-weight: 600; }
.wp-block-details[open] summary { margin-bottom: .5rem; }

/* ---------- Diagrama de módulos ---------- */
.jcb-diagram svg { display: block; width: 100%; max-width: 44rem; height: auto; }

/* ---------- Botones ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--tinta); border: 2px solid var(--wp--preset--color--tinta); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--tinta); color: var(--wp--preset--color--blanco); }

/* ---------- Pie ---------- */
.jcb-footer a { color: var(--wp--preset--color--marfil); }
.jcb-footer .jcb-brand a { color: var(--wp--preset--color--marfil); }
.jcb-footer__title { font-size: 1rem; margin-top: 0; color: var(--wp--preset--color--marfil) !important; }
.jcb-footer__links, .jcb-legal-links { list-style: none; padding: 0; margin: 0; }
.jcb-footer__links li, .jcb-legal-links li { margin: .35rem 0; }
.jcb-legal-links--vacio { font-size: .9375rem; opacity: .85; }

/* ---------- Formularios (selector y contacto) ---------- */
.jcb-form label, .jcb-form legend { font-weight: 600; display: block; margin-bottom: .35rem; }
.jcb-form .jcb-hint { font-size: .9rem; color: var(--wp--preset--color--tinta-suave); margin: 0 0 .5rem; font-weight: 400; }
.jcb-form input[type="text"], .jcb-form input[type="email"], .jcb-form input[type="tel"], .jcb-form select, .jcb-form textarea {
	width: 100%; max-width: 36rem; font: inherit; padding: .65rem .75rem; border: 1px solid #8A96A3; border-radius: var(--jcb-radius); background: #fff; color: var(--wp--preset--color--tinta);
}
.jcb-form textarea { min-height: 8rem; }
.jcb-form .jcb-field { margin-bottom: 1.1rem; }
.jcb-form [aria-invalid="true"] { border-color: #A4262C; border-width: 2px; }
.jcb-error { color: #A4262C; font-size: .9375rem; margin: .35rem 0 0; }
.jcb-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.jcb-options { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.jcb-option { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--jcb-line); border-radius: var(--jcb-radius); padding: .7rem .8rem; background: #fff; font-weight: 400 !important; cursor: pointer; }
.jcb-option:has(input:checked) { border-color: var(--wp--preset--color--petroleo); box-shadow: inset 0 0 0 1px var(--wp--preset--color--petroleo); background: var(--wp--preset--color--petroleo-claro); }
.jcb-option input { margin-top: .25rem; accent-color: var(--wp--preset--color--petroleo); }
.jcb-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.jcb-btn { font: inherit; font-weight: 600; padding: .7rem 1.2rem; border-radius: var(--jcb-radius); border: 2px solid var(--wp--preset--color--petroleo); background: var(--wp--preset--color--petroleo); color: #fff; cursor: pointer; }
.jcb-btn:hover { background: var(--wp--preset--color--tinta); border-color: var(--wp--preset--color--tinta); }
.jcb-btn--secundario { background: transparent; color: var(--wp--preset--color--tinta); border-color: var(--wp--preset--color--tinta); }
.jcb-btn--secundario:hover { color: #fff; }
.jcb-btn--texto { background: none; border-color: transparent; color: var(--wp--preset--color--petroleo); text-decoration: underline; padding-inline: .3rem; }
.jcb-btn--texto:hover { background: none; border-color: transparent; color: var(--wp--preset--color--tinta); }
.jcb-btn[disabled] { opacity: .6; cursor: not-allowed; }
.jcb-aviso { border: 1px solid var(--jcb-line); border-left: 4px solid var(--wp--preset--color--ambar-texto); background: var(--wp--preset--color--ambar-fondo); padding: .8rem 1rem; border-radius: var(--jcb-radius); }
.jcb-aviso--ok { border-left-color: var(--wp--preset--color--petroleo); background: var(--wp--preset--color--petroleo-claro); }
.jcb-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Selector */
.jcb-selector { border: 1px solid var(--jcb-line); border-radius: var(--jcb-radius); background: #fff; padding: clamp(1rem, 3vw, 2rem); }
.jcb-selector__progress { font-size: .9375rem; color: var(--wp--preset--color--tinta-suave); margin: 0 0 1rem; }
.jcb-selector__bar { height: 4px; background: var(--jcb-line); border-radius: 4px; overflow: hidden; margin-bottom: 1.25rem; }
.jcb-selector__bar span { display: block; height: 100%; background: var(--wp--preset--color--petroleo); width: 0; transition: width .2s ease; }
.jcb-selector.is-enhanced .jcb-step[hidden] { display: none; }
.jcb-result h3 { margin-bottom: .3rem; }
.jcb-result__principal { border-left: 4px solid var(--wp--preset--color--petroleo); padding-left: 1rem; }
.jcb-result__secundaria { border-left: 4px solid var(--jcb-line); padding-left: 1rem; margin-top: 1.25rem; }
.jcb-summary { background: var(--wp--preset--color--marfil); border: 1px solid var(--jcb-line); border-radius: var(--jcb-radius); padding: .8rem 1rem; font-size: .9375rem; }
.jcb-summary dt { font-weight: 600; }
.jcb-summary dd { margin: 0 0 .5rem; }

/* 404 */
.jcb-404 { padding-block: var(--wp--preset--spacing--60); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
