/* ==========================================================================
   comitas — estilos complementarios a theme.json
   Solo lo que theme.json no puede expresar: estilos de bloque propios,
   tarjetas, cabecera fija y pequeños detalles.
   ========================================================================== */

:root {
	--cm-radius: 8px;
	--cm-shadow: 0 1px 2px rgba(15, 35, 64, .06), 0 4px 16px rgba(15, 35, 64, .06);
	--cm-shadow-hover: 0 2px 4px rgba(15, 35, 64, .08), 0 12px 28px rgba(15, 35, 64, .12);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ---------- Accesibilidad ---------- */
.skip-link.screen-reader-text:focus { background: #fff; color: var(--wp--preset--color--marino); z-index: 100000; }
:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--rojo);
	outline-offset: 2px;
}

/* ---------- Cabecera ---------- */
.cm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--linea);
}
.admin-bar .cm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cm-header { top: 0; position: relative; } }
.cm-header .wp-block-site-logo img { max-height: 40px; width: auto; }
.cm-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem 1.5rem;
}
.cm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.1rem;
	font-size: 1.25rem;
	font-weight: 600;
}
.cm-header .wp-block-navigation .current-menu-item > a,
.cm-header .wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--rojo); }
@media (max-width: 599px) { .cm-header .cm-header-cta { display: none; } }

/* ---------- Estilo de bloque: título con acento rojo ---------- */
.is-style-acento::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: .65rem;
	background: var(--wp--preset--color--rojo);
	border-radius: 2px;
}
.has-text-align-center.is-style-acento::after { margin-left: auto; margin-right: auto; }

/* ---------- Antetítulo ---------- */
.is-style-antetitulo {
	color: var(--wp--preset--color--rojo);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: .25rem;
}

/* ---------- Texto pendiente de completar (visible en front a propósito) ---------- */
.is-style-pendiente {
	background: #FFF7E0;
	border-left: 4px solid #F2B705;
	padding: .75rem 1rem;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
	color: #6B5300;
}

/* ---------- Tarjetas ---------- */
.is-style-tarjeta,
.is-style-tarjeta-enlace {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--cm-radius);
	box-shadow: var(--cm-shadow);
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	height: 100%;
}
.is-style-tarjeta-enlace {
	position: relative;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.is-style-tarjeta-enlace:hover {
	box-shadow: var(--cm-shadow-hover);
	transform: translateY(-2px);
	border-color: #F3B9BD;
}
/* El primer enlace del título cubre toda la tarjeta */
.is-style-tarjeta-enlace :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--cm-radius);
}
.is-style-tarjeta-enlace :is(h2, h3, h4) a { color: var(--wp--preset--color--marino); }
.is-style-tarjeta-enlace:hover :is(h2, h3, h4) a { color: var(--wp--preset--color--rojo); text-decoration: none; }
.cm-chevron :is(h2, h3, h4)::after,
.is-style-tarjeta-enlace.cm-chevron :is(h2, h3, h4) a::before {
	content: none;
}
.cm-card-head { display: flex; align-items: flex-start; gap: .9rem; }
.cm-card-head > * { margin: 0 !important; }

/* Iconos */
.cm-icon img { width: 44px; height: 44px; display: block; }
.cm-icon.is-small img { width: 34px; height: 34px; }
.cm-icon { margin: 0 !important; flex-shrink: 0; }

/* Paso numerado (01, 02, 03) */
.cm-num {
	color: var(--wp--preset--color--rojo);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	letter-spacing: -0.02em;
}

/* ---------- Tarjeta de caso: imagen con título superpuesto ---------- */
.is-style-tarjeta-caso,
.cm-caso-card {
	position: relative;
	border-radius: var(--cm-radius);
	overflow: hidden;
	background: var(--wp--preset--color--marino);
	isolation: isolate;
	min-height: 240px;
	height: 100%;
}
.cm-caso-card .wp-block-post-featured-image,
.cm-caso-card .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	z-index: -2;
}
.cm-caso-card .wp-block-post-featured-image img,
.cm-caso-card .wp-block-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .5s ease;
}
.cm-caso-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(15, 35, 64, 0) 30%, rgba(15, 35, 64, .9) 100%);
}
.cm-caso-card:hover img { transform: scale(1.04); }
.cm-caso-card .cm-caso-texto {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.25rem 1.4rem;
	color: #fff;
}
.cm-caso-card .cm-caso-texto > * { margin: 0; }
.cm-caso-card .cm-caso-texto > * + * { margin-top: .3rem; }
.cm-caso-card :is(h2, h3), .cm-caso-card :is(h2, h3) a { color: #fff !important; }
.cm-caso-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.cm-caso-card p, .cm-caso-card .wp-block-post-excerpt { color: rgba(255, 255, 255, .85); font-size: var(--wp--preset--font-size--small); }
.cm-caso-card .wp-block-post-excerpt__excerpt { margin: 0; }
.cm-caso-card :is(h2, h3) a:hover { text-decoration: none; }
.cm-caso-card .wp-block-post-excerpt__more-text { display: none; }

/* Grids de query loop: alturas iguales */
.wp-block-post-template.is-layout-grid > li,
.wp-block-post-template.is-layout-flow > li { height: 100%; }

/* ---------- "En movimiento" ---------- */
.cm-mov-item {
	display: flex;
	gap: 1rem;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: var(--cm-radius);
	padding: .6rem;
	position: relative;
	height: 100%;
	transition: box-shadow .2s ease;
}
.cm-mov-item:hover { box-shadow: var(--cm-shadow-hover); }
.cm-mov-item .wp-block-post-featured-image { flex: 0 0 104px; margin: 0; }
.cm-mov-item .wp-block-post-featured-image img { width: 104px; height: 72px !important; object-fit: cover; border-radius: 5px; }
.cm-mov-item .wp-block-post-title { font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0; line-height: 1.3; margin: .2rem 0 0; }
.cm-mov-item .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.cm-mov-item > .wp-block-group { margin: 0; }

/* ---------- Flujo: Problema → Servicio → Caso → Tecnología ---------- */
.cm-flujo { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: center; align-items: center; }
.cm-flujo p { margin: 0; }
.cm-flujo .cm-flecha { color: var(--wp--preset--color--rojo); font-weight: 400; }

/* ---------- Bloque de tecnología (fondo gris, tarjetas pequeñas) ---------- */
.cm-tech .is-style-tarjeta { box-shadow: none; }

/* ---------- Lista con check ---------- */
.is-style-check { list-style: none; padding-left: 0 !important; }
.is-style-check li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
.is-style-check li::before {
	content: "";
	position: absolute;
	left: 0; top: .2em;
	width: 1.15rem; height: 1.15rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rojo-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23E30613' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* ---------- Hero ---------- */
.cm-hero .wp-block-media-text__media img { border-radius: 0; }
.cm-hero h1 { margin-bottom: .25rem; }
.cm-hero-sub { font-weight: 700; color: var(--wp--preset--color--gris); }
@media (max-width: 600px) {
	.cm-hero.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { padding: 2rem 1rem 2.5rem; }
	.cm-hero .wp-block-media-text__media { min-height: 260px; }
}

/* ---------- Pie ---------- */
.cm-footer a { color: var(--wp--preset--color--gris); }
.cm-footer a:hover { color: var(--wp--preset--color--rojo); }
.cm-footer .wp-block-site-title a { color: var(--wp--preset--color--rojo); }
.cm-footer .wp-block-social-links .wp-social-link { color: var(--wp--preset--color--marino); }

/* ---------- Formularios (Contact Form 7 / Fluent Forms / genéricos) ---------- */
.cm-form input[type="text"], .cm-form input[type="email"], .cm-form input[type="tel"],
.cm-form select, .cm-form textarea,
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 6px;
	font: inherit;
	background: #fff;
}
.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--rojo);
	color: #fff;
	border: 0;
	padding: .8rem 1.6rem;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Entrada / caso: contenido legible ---------- */
.cm-prose > * + h2 { margin-top: 2.5rem; }
.cm-prose > * + h3 { margin-top: 1.75rem; }

/* ---------- Ficha de datos de caso ---------- */
.cm-ficha {
	border-top: 3px solid var(--wp--preset--color--rojo);
}
.cm-ficha dt, .cm-ficha .cm-ficha-label {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--wp--preset--color--gris);
	font-weight: 700;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Secciones de páginas interiores ---------- */
.cm-seccion > p { max-width: 760px; margin-left: max(0px, calc((100% - 1200px) / 2)) !important; }
.cm-seccion:not(.has-background) + .cm-seccion:not(.has-background) { padding-top: 0 !important; }
@media (min-width: 782px) {
	.wp-block-group.alignwide.is-layout-grid:has(> :nth-child(3)) { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)) !important; }
}

@media (max-width: 600px) {
	.cm-hero.is-stacked-on-mobile .wp-block-media-text__content { grid-row: 1; }
	.cm-hero.is-stacked-on-mobile .wp-block-media-text__media { grid-row: 2; }
}