/* =========================================================================
   Creative Connections — hoja de estilos del tema
   Orden: tokens · base · layout · cabecera · bloques · secciones · pie
   ========================================================================= */

:root {
	--cc-radius-sm: 6px;
	--cc-radius-md: 14px;
	--cc-radius-lg: 24px;
	--cc-pill: 999px;
	--cc-ease: cubic-bezier(.22, .61, .36, 1);
	--cc-t: 220ms var(--cc-ease);
	--cc-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9c10-7 20-7 30 0s20 7 30 0 20-7 30 0 20 7 30 0' fill='none' stroke='%233da4b6' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
	--cc-header-h: 76px;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cc-header-h) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

::selection {
	background: var(--wp--preset--color--teal);
	color: #fff;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 3px;
	border-radius: var(--cc-radius-sm);
}

img,
video {
	height: auto;
	max-width: 100%;
}

/* Texto de apoyo, más aire y menos peso visual. */
.cc-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	max-width: 58ch;
}

.cc-measure {
	max-width: 62ch;
}

.cc-balance {
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   Secciones oscuras: invierte la paleta sin repetir ajustes bloque a bloque
   ------------------------------------------------------------------------- */

.cc-dark,
.has-navy-background-color,
.has-navy-deep-background-color,
.has-deep-wave-gradient-background,
.has-teal-fade-gradient-background {
	color: #e5f3f5;
}

.cc-dark :where(h1, h2, h3, h4, h5),
.has-navy-background-color :where(h1, h2, h3, h4, h5),
.has-navy-deep-background-color :where(h1, h2, h3, h4, h5),
.has-deep-wave-gradient-background :where(h1, h2, h3, h4, h5) {
	color: #fff;
}

.cc-dark :where(h6),
.has-deep-wave-gradient-background :where(h6) {
	color: var(--wp--preset--color--teal-soft);
}

.cc-dark p:not(.has-text-color),
.has-deep-wave-gradient-background p:not(.has-text-color) {
	color: rgba(229, 243, 245, .82);
}

.cc-dark a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--teal-soft);
}

/* -------------------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------------------- */

.cc-header {
	position: sticky;
	top: 0;
	z-index: 90;
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	background: rgba(255, 255, 255, .82);
	border-bottom: 1px solid transparent;
	transition: border-color var(--cc-t), background var(--cc-t), box-shadow var(--cc-t);
}

body.cc-scrolled .cc-header {
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 10px 30px -24px rgba(10, 42, 62, .5);
}

.cc-header .wp-block-site-logo img {
	max-height: 46px;
	width: auto;
	transition: transform var(--cc-t);
}

.cc-header .wp-block-site-logo a:hover img {
	transform: translateY(-1px) scale(1.02);
}

/* Navegación: subrayado que crece desde la izquierda. */
.cc-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: .4rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.cc-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var(--wp--preset--color--teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cc-t);
}

.cc-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.cc-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.cc-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

/* Menú desplegado en móvil. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--navy-deep);
	padding-top: clamp(3rem, 12vw, 5rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 600;
	letter-spacing: -.03em;
	color: #fff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* -------------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	transition: background-color var(--cc-t), color var(--cc-t), border-color var(--cc-t), transform var(--cc-t), box-shadow var(--cc-t);
	will-change: transform;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -18px rgba(10, 42, 62, .75);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--line);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.cc-dark .wp-block-button.is-style-ghost .wp-block-button__link,
.has-deep-wave-gradient-background .wp-block-button.is-style-ghost .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
}

.cc-dark .wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--navy);
	border-color: #fff;
}

.wp-block-button.is-style-light .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--navy);
	border-color: #fff;
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal-soft);
	border-color: var(--wp--preset--color--teal-soft);
	color: var(--wp--preset--color--navy-deep);
}

.wp-block-button.is-style-link-arrow .wp-block-button__link {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	box-shadow: none;
}

.wp-block-button.is-style-link-arrow .wp-block-button__link::after {
	content: "→";
	transition: transform var(--cc-t);
}

.wp-block-button.is-style-link-arrow .wp-block-button__link:hover {
	color: var(--wp--preset--color--teal-ink);
	transform: none;
	box-shadow: none;
}

.wp-block-button.is-style-link-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

/* -------------------------------------------------------------------------
   Encabezados con firma propia
   ------------------------------------------------------------------------- */

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-ink);
	display: flex;
	align-items: center;
	gap: .75rem;
	line-height: 1.4;
}

.is-style-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: none;
}

.is-style-wave {
	position: relative;
	padding-bottom: .58em;
}

.is-style-wave::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: .06em;
	width: min(240px, 46%);
	height: 14px;
	background-image: var(--cc-wave);
	background-repeat: repeat-x;
	background-size: 120px 14px;
}

.has-text-align-center.is-style-wave::after {
	left: 50%;
	transform: translateX(-50%);
}

/* -------------------------------------------------------------------------
   Tarjetas y contenedores
   ------------------------------------------------------------------------- */

.wp-block-group.is-style-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	transition: transform var(--cc-t), box-shadow var(--cc-t), border-color var(--cc-t);
	height: 100%;
}

.wp-block-group.is-style-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--lift);
}

.wp-block-group.is-style-card-dark {
	background: linear-gradient(155deg, #0a2a3e, #061b28);
	border: 1px solid rgba(162, 211, 220, .18);
	border-radius: var(--cc-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	color: #e5f3f5;
	height: 100%;
}

.wp-block-group.is-style-bordered {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		padding-left: 0;
		padding-top: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
   Imágenes
   ------------------------------------------------------------------------- */

.wp-block-image.is-style-framed img {
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--wp--preset--shadow--lift);
	border: 1px solid rgba(255, 255, 255, .5);
}

.wp-block-image.is-style-tilt img {
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--wp--preset--shadow--lift);
	transform: rotate(-1.6deg);
	transition: transform 400ms var(--cc-ease);
}

.wp-block-image.is-style-tilt:hover img {
	transform: rotate(0deg) scale(1.01);
}

/* -------------------------------------------------------------------------
   Listas, citas y separadores
   ------------------------------------------------------------------------- */

.wp-block-list.is-style-checks {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: .85rem;
}

.wp-block-list.is-style-checks > li {
	position: relative;
	padding-left: 2.1rem;
	line-height: 1.55;
}

.wp-block-list.is-style-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: var(--cc-pill);
	background: var(--wp--preset--color--teal) var(--cc-check) center / .75rem no-repeat;
	--cc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4L14 4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cc-js .cc-reveal.is-visible .wp-block-separator.is-style-wave-rule,
.cc-js .cc-reveal.is-visible .is-style-wave::after {
	animation: cc-draw 900ms var(--cc-ease) both;
	animation-delay: 200ms;
}

@keyframes cc-draw {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

.wp-block-separator.is-style-wave-rule {
	border: 0;
	height: 12px;
	width: min(220px, 60%);
	background-image: var(--cc-wave);
	background-repeat: repeat-x;
	background-size: 120px 12px;
	opacity: 1;
}

.wp-block-quote.is-style-statement {
	border: 0;
	padding: 0;
	position: relative;
	padding-left: clamp(2.5rem, 6vw, 4.5rem);
}

.wp-block-quote.is-style-statement::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: clamp(1.75rem, 4vw, 3rem);
	height: 2px;
	background: var(--wp--preset--color--teal);
}

.wp-block-quote.is-style-statement cite {
	display: block;
	margin-top: 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
   Piezas propias: héroe, olas, proceso, marquesina
   ------------------------------------------------------------------------- */

.cc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Campo de líneas de ola tras el titular: la ola del logotipo como estructura. */
.cc-hero::before {
	content: "";
	position: absolute;
	inset: 4% -14% auto auto;
	width: min(1120px, 92vw);
	height: 620px;
	z-index: -1;
	opacity: .5;
	background: var(--cc-hero-field) right top / 100% auto no-repeat;
	--cc-hero-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 620' preserveAspectRatio='xMaxYMin meet'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M40 260C190 100 340 100 490 260s300 150 450 0 200-150 267-75' stroke='%233da4b6' stroke-width='2' opacity='.45'/%3E%3Cpath d='M40 320C190 160 340 160 490 320s300 150 450 0 200-150 267-75' stroke='%233da4b6' stroke-width='2' opacity='.32'/%3E%3Cpath d='M40 380C190 220 340 220 490 380s300 150 450 0 200-150 267-75' stroke='%233da4b6' stroke-width='2' opacity='.2'/%3E%3Cpath d='M40 440C190 280 340 280 490 440s300 150 450 0 200-150 267-75' stroke='%230a2a3e' stroke-width='2' opacity='.09'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes cc-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* El héroe entra solo, en cascada, en cuanto pinta la página. */
.cc-hero .wp-block-column > * {
	animation: cc-rise 760ms var(--cc-ease) both;
}

.cc-hero .wp-block-column > *:nth-child(2) { animation-delay: 80ms; }
.cc-hero .wp-block-column > *:nth-child(3) { animation-delay: 160ms; }
.cc-hero .wp-block-column > *:nth-child(4) { animation-delay: 240ms; }
.cc-hero .wp-block-column:nth-child(2) > * { animation-delay: 320ms; }
.cc-hero .wp-block-column:nth-child(2) > *:nth-child(2) { animation-delay: 420ms; }

/* El campo de olas deriva muy despacio: da vida al fondo sin pedir atención. */
.cc-hero::before {
	animation: cc-swell 24s ease-in-out infinite alternate;
}

@keyframes cc-swell {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-2.5%, 1.5%, 0) scale(1.04); }
}

/* Palabra en serif itálica dentro de un titular. */
.cc-accent {
	font-family: var(--wp--preset--font-family--accent);
	font-style: italic;
	font-weight: 300;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--teal-ink);
}

.cc-dark .cc-accent {
	color: var(--wp--preset--color--teal-soft);
}

/* Tarjeta que se monta sobre la pieza contigua. */
.cc-float-card {
	position: relative;
	z-index: 2;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-md);
	box-shadow: 0 24px 50px -30px rgba(10, 42, 62, .4);
}

@media (min-width: 1100px) {
	.cc-float-card {
		margin-left: -3.5rem;
		margin-top: -1.25rem;
		width: calc(100% + 3.5rem);
	}
}

/* Dos bloques separados por un filete, no por dos tarjetas. */
.cc-split {
	border-top: 1px solid var(--wp--preset--color--line);
}

.cc-split > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 781px) {
	.cc-split > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

/* Riel de capacidades: una línea, sin animación ni JavaScript. */
.cc-rail {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.cc-rail p {
	margin: 0;
}

.cc-rail__label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-ink);
}

.cc-rail__sep {
	color: var(--wp--preset--color--teal-ink);
}

/* Valores: un filete de color propio corona cada uno. */
.cc-value {
	border-top: 2px solid var(--wp--preset--color--line);
	padding-top: 1.25rem;
}

.cc-value--navy { border-top-color: var(--wp--preset--color--navy); }
.cc-value--teal { border-top-color: var(--wp--preset--color--teal); }
.cc-value--soft { border-top-color: var(--wp--preset--color--teal-soft); }

/* Franja de olas al pie de una sección. */
.cc-wave-bottom {
	position: relative;
	padding-bottom: calc(var(--wp--preset--spacing--70) + 60px);
}

.cc-wave-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 90px;
	background: var(--cc-wave-shape) bottom center / 100% 90px no-repeat;
	--cc-wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 46c160 38 320 44 480 20s320-58 480-46 320 52 480 60v10H0z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.cc-wave-bottom--mist::after {
	--cc-wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 46c160 38 320 44 480 20s320-58 480-46 320 52 480 60v10H0z' fill='%23f4fafb'/%3E%3C/svg%3E");
}

/* Línea de olas decorativa, animada de lado a lado. */
.cc-wave-line {
	height: 14px;
	background-image: var(--cc-wave);
	background-repeat: repeat-x;
	background-size: 120px 14px;
	opacity: .55;
	animation: cc-drift 18s linear infinite;
}

@keyframes cc-drift {
	from { background-position-x: 0; }
	to   { background-position-x: 240px; }
}

/* Numeración del proceso. */
.cc-steps {
	counter-reset: cc-step;
}

.cc-steps .cc-step {
	counter-increment: cc-step;
	position: relative;
	padding-top: 2.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.cc-steps .cc-step::before {
	content: counter(cc-step, decimal-leading-zero);
	position: absolute;
	top: 1.1rem;
	left: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--wp--preset--color--teal-ink);
}

.cc-dark .cc-steps .cc-step {
	border-top-color: rgba(162, 211, 220, .22);
}

/* Datos destacados. */
.cc-stat {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--wp--preset--color--navy);
}

.cc-dark .cc-stat {
	color: #fff;
}

/* -------------------------------------------------------------------------
   Aparición al hacer scroll
   ------------------------------------------------------------------------- */

.cc-js .cc-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 700ms var(--cc-ease), transform 700ms var(--cc-ease);
}

.cc-js .cc-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Escalonado: las columnas de una sección entran una detrás de otra. */
.cc-js .cc-reveal.is-visible > .wp-block-columns > .wp-block-column {
	animation: cc-rise 640ms var(--cc-ease) both;
}

.cc-js .cc-reveal.is-visible > .wp-block-columns > .wp-block-column:nth-child(2) { animation-delay: 90ms; }
.cc-js .cc-reveal.is-visible > .wp-block-columns > .wp-block-column:nth-child(3) { animation-delay: 180ms; }
.cc-js .cc-reveal.is-visible > .wp-block-columns > .wp-block-column:nth-child(4) { animation-delay: 270ms; }

/* -------------------------------------------------------------------------
   Entradas, buscador y formularios
   ------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: .9rem 1.1rem;
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-md);
	transition: border-color var(--cc-t), box-shadow var(--cc-t);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 4px rgba(61, 164, 182, .16);
	outline: none;
}

label {
	display: block;
	margin-bottom: .4rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--teal-ink);
}

/* Tarjeta de entrada en los listados. */
.cc-card-link {
	display: block;
	overflow: hidden;
	border-radius: var(--cc-radius-lg);
}

.cc-card-link img {
	transition: transform 500ms var(--cc-ease);
}

.wp-block-group.is-style-card:hover .cc-card-link img {
	transform: scale(1.04);
}

/* -------------------------------------------------------------------------
   Pie de página
   ------------------------------------------------------------------------- */

.cc-footer {
	background: var(--wp--preset--color--navy-deep);
	color: rgba(229, 243, 245, .78);
}

.cc-footer a {
	color: rgba(229, 243, 245, .78);
	text-decoration: none;
	transition: color var(--cc-t);
}

.cc-footer a:hover {
	color: #fff;
}

.cc-footer .wp-block-navigation {
	gap: .5rem 1.5rem;
}

.cc-footer__legal {
	border-top: 1px solid rgba(162, 211, 220, .16);
}

/* Volver arriba. */
.cc-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 80;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--cc-pill);
	background: var(--wp--preset--color--navy);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--cc-t);
	box-shadow: 0 12px 28px -14px rgba(10, 42, 62, .8);
}

body.cc-scrolled .cc-top {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.cc-top:hover {
	background: var(--wp--preset--color--teal-ink);
}

/* -------------------------------------------------------------------------
   Adaptación por tamaño de pantalla
   Los bloques de WordPress apilan sus columnas a 781 px. Aquí se corrige lo
   que necesita apilar antes, lo que se queda estrecho y lo que hay que
   agrandar para el dedo.
   ------------------------------------------------------------------------- */

/* Palabras largas del español: «TalentConnections», «responsabilidades». */
:where(h1, h2, h3, h4, h5) {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Portátiles pequeños: el héroe a 56/44 se queda sin sitio antes que el resto. */
@media (max-width: 1024px) {
	.cc-hero .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.cc-hero .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.cc-hero .wp-block-column:nth-child(2) {
		margin-top: var(--wp--preset--spacing--50);
	}

	.cc-hero::before {
		height: 420px;
		opacity: .35;
	}
}

/* Tabletas: el proceso y los valores caben en dos, no en cuatro. */
@media (max-width: 960px) {
	.cc-steps.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.cc-steps.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
		flex-grow: 0;
	}
}

/* Móvil: una columna, sin filetes laterales y con los dedos en mente. */
@media (max-width: 781px) {
	.cc-split > .wp-block-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.cc-steps.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.cc-header .wp-block-site-logo img {
		max-height: 38px;
	}

	/* Objetivo táctil mínimo en el menú desplegado y en los botones. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		padding-block: .5rem;
		min-height: 44px;
	}

	.wp-block-button__link {
		min-height: 48px;
		padding-inline: 1.6rem;
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	/* El enlace con flecha no es un botón: no lo estires. */
	.wp-block-buttons > .wp-block-button.is-style-link-arrow,
	.wp-block-buttons > .wp-block-button.is-style-link-arrow .wp-block-button__link {
		width: auto;
		min-height: 0;
		padding-inline: 0;
	}

	.cc-float-card {
		margin-top: 1.25rem;
	}

	.wp-block-quote.is-style-statement {
		padding-left: 0;
		padding-top: 2.25rem;
	}

	.wp-block-quote.is-style-statement::before {
		top: 0;
	}
}

/* Teléfonos estrechos: menos aire lateral y titulares que no desbordan. */
@media (max-width: 600px) {
	.cc-hero::before {
		height: 300px;
	}

	.is-style-wave::after {
		width: min(120px, 55%);
	}

	.cc-rail {
		font-size: var(--wp--preset--font-size--xs);
	}

	.cc-footer__legal {
		gap: .75rem;
	}
}

@media (max-width: 400px) {
	body {
		--wp--style--root--padding-left: 1rem;
		--wp--style--root--padding-right: 1rem;
	}

	.cc-top {
		width: 42px;
		height: 42px;
	}
}

/* Pantallas muy anchas: el contenido no se estira más, respira más. */
@media (min-width: 1600px) {
	.cc-hero {
		padding-block: var(--wp--preset--spacing--80);
	}
}

/* -------------------------------------------------------------------------
   Accesibilidad y preferencias del sistema
   ------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: 0 0 var(--cc-radius-md) 0;
}

.skip-link:focus {
	left: 0;
}

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

	.cc-js .cc-reveal,
	.cc-hero .wp-block-column > * {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
}

@media print {
	.cc-header,
	.cc-footer,
	.cc-top {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   Ajustes finos de cabecera y pie
   ------------------------------------------------------------------------- */

/* El CTA de la cabecera estorba en pantallas pequeñas: el menú ya lo cubre. */
@media (max-width: 900px) {
	.cc-header__cta {
		display: none;
	}
}

.cc-footer__menu {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: .6rem;
}

/* -------------------------------------------------------------------------
   Etiquetas técnicas (stack de un producto)
   ------------------------------------------------------------------------- */

.cc-chips {
	gap: .5rem;
}

.cc-chips p {
	margin: 0;
	padding: .4rem .85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-pill);
	background: #fff;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.4;
}

.cc-chips--dark p {
	background: rgba(162, 211, 220, .1);
	border-color: rgba(162, 211, 220, .28);
	color: var(--wp--preset--color--teal-soft);
}

/* Términos técnicos dentro del texto corrido. */
:where(.entry-content, .wp-block-list) code {
	padding: .12em .4em;
	border-radius: var(--cc-radius-sm);
	background: rgba(61, 164, 182, .12);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .9em;
	color: var(--wp--preset--color--navy);
}

.cc-dark :where(.wp-block-list) code {
	background: rgba(162, 211, 220, .16);
	color: var(--wp--preset--color--teal-soft);
}

/* -------------------------------------------------------------------------
   Planes
   ------------------------------------------------------------------------- */

.cc-plan {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-lg);
	background: #fff;
}

/* El plan destacado se distingue por peso, no por un adorno de color. */
.cc-plan--destacado {
	border-color: var(--wp--preset--color--navy);
	box-shadow: var(--wp--preset--shadow--lift);
}

.cc-plan__precio {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--wp--preset--color--navy);
}

.cc-plan__periodo {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

/* Cuando el precio no se publica, el hueco se llena con la frase, no con un número. */
.cc-plan__privado {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--wp--preset--color--navy);
}

.cc-plan__lista {
	margin-top: auto;
}

/* =========================================================================
   Tema clásico: cabecera, pie y plantillas propias
   El diseño de las secciones sigue viviendo en los patrones de bloques; lo de
   aquí es la chapa que Elementor puede sustituir cuando quiera.
   ========================================================================= */

.cc-wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.cc-wrap--estrecho {
	max-width: 820px;
}

.cc-main {
	display: block;
}

.cc-main--archivo {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
}

/* -------------------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------------------- */

.cc-header__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: 1rem clamp(1.25rem, 5vw, 3.5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.25rem);
}

.cc-header__brand img,
.cc-footer__brand img {
	display: block;
	max-height: 46px;
	width: auto;
	height: auto;
}

.cc-header__title,
.cc-footer__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.cc-footer__title {
	color: #fff;
}

.cc-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.cc-menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.cc-menu a {
	position: relative;
	display: block;
	padding-block: .4rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cc-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--teal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cc-t);
}

.cc-menu a:hover::after,
.cc-menu .current-menu-item > a::after {
	transform: scaleX(1);
}

.cc-menu .current-menu-item > a {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

/* El botón de la cabecera reutiliza el botón del sistema. */
.cc-header__cta,
.cc-buscador button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 48px;
	padding-inline: 1.9rem;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: var(--cc-pill);
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--cc-t), border-color var(--cc-t), transform var(--cc-t);
}

.cc-header__cta:hover,
.cc-buscador button:hover {
	background: var(--wp--preset--color--teal-ink);
	border-color: var(--wp--preset--color--teal-ink);
	color: #fff;
	transform: translateY(-2px);
}

.cc-nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

@media (max-width: 900px) {
	.cc-nav-toggle {
		display: flex;
	}

	.cc-nav {
		position: fixed;
		inset: 0;
		z-index: 95;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 1.25rem;
		padding: clamp(2rem, 10vw, 5rem);
		background: var(--wp--preset--color--navy-deep);
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform 320ms var(--cc-ease), visibility 320ms;
	}

	body.cc-nav-abierta .cc-nav {
		transform: none;
		visibility: visible;
	}

	body.cc-nav-abierta {
		overflow: hidden;
	}

	.cc-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem;
	}

	.cc-menu a {
		min-height: 44px;
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--2xl);
		font-weight: 600;
		letter-spacing: -.03em;
		color: #fff;
	}

	.cc-menu a::after {
		display: none;
	}

	.cc-header__cta {
		background: #fff;
		border-color: #fff;
		color: var(--wp--preset--color--navy);
	}

	/* El aspa que cierra el menú vive por encima del panel. */
	body.cc-nav-abierta .cc-nav-toggle {
		position: fixed;
		top: 1rem;
		right: clamp(1.25rem, 5vw, 3.5rem);
		z-index: 96;
		color: #fff;
	}
}

/* -------------------------------------------------------------------------
   Pie
   ------------------------------------------------------------------------- */

.cc-footer__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) clamp(1.25rem, 5vw, 3.5rem) 0;
	display: grid;
	grid-template-columns: 5fr 2fr 3fr;
	gap: clamp(2rem, 5vw, 4rem);
}

.cc-footer__brand p {
	margin: 1.5rem 0 0;
	max-width: 38ch;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.65;
}

.cc-footer__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-soft);
}

.cc-footer__menu,
.cc-footer__legal-menu {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .6rem;
	font-size: var(--wp--preset--font-size--sm);
}

.cc-footer__legal-menu {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	font-size: var(--wp--preset--font-size--xs);
}

.cc-footer__contacto {
	margin: 1.25rem 0 1.75rem;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
	color: #fff;
}

.cc-footer__legal {
	max-width: 1240px;
	margin: var(--wp--preset--spacing--60) auto 0;
	padding: 1.75rem clamp(1.25rem, 5vw, 3.5rem) 2rem;
	border-top: 1px solid rgba(162, 211, 220, .16);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--xs);
}

@media (max-width: 900px) {
	.cc-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.cc-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Listados, entradas y utilidades de plantilla
   ------------------------------------------------------------------------- */

.cc-archivo__cabecera {
	display: grid;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--60);
}

.cc-archivo__titulo,
.cc-entrada__titulo,
.cc-pagina__titulo,
.cc-error__titulo {
	margin: 0;
}

.cc-rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 960px) {
	.cc-rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.cc-rejilla {
		grid-template-columns: 1fr;
	}
}

.cc-tarjeta {
	display: grid;
	gap: .9rem;
	align-content: start;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	transition: transform var(--cc-t), box-shadow var(--cc-t), border-color var(--cc-t);
}

.cc-tarjeta:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--lift);
}

.cc-tarjeta__imagen {
	display: block;
	overflow: hidden;
	border-radius: var(--cc-radius-md);
}

.cc-tarjeta__imagen img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 500ms var(--cc-ease);
}

.cc-tarjeta:hover .cc-tarjeta__imagen img {
	transform: scale(1.04);
}

.cc-tarjeta__meta,
.cc-entrada__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-ink);
}

.cc-tarjeta__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.cc-tarjeta__titulo a {
	text-decoration: none;
}

.cc-tarjeta__extracto {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.cc-pagina__cabecera,
.cc-entrada__cabecera {
	padding-top: var(--wp--preset--spacing--70);
	display: grid;
	gap: 1rem;
}

.cc-entrada__portada {
	margin: var(--wp--preset--spacing--60) auto 0;
}

.cc-entrada__portada img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cc-radius-lg);
}

.cc-entrada__contenido,
.cc-pagina__contenido {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
}

/* Una página con contenido de bloques trae sus propios anchos. */
.cc-pagina__contenido > :where(:not(.alignfull):not(.alignwide)) {
	max-width: 820px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.cc-pagina--ancho .cc-pagina__contenido,
.cc-lienzo__contenido {
	padding: 0;
	max-width: none;
}

.cc-buscador {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
}

.cc-buscador input {
	flex: 1 1 16rem;
}

.cc-vacio {
	color: var(--wp--preset--color--muted);
}

.cc-error {
	padding-block: var(--wp--preset--spacing--80);
	display: grid;
	gap: 1.25rem;
}

.cc-error .cc-wrap--estrecho {
	display: grid;
	gap: 1.25rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
   Puente con Elementor
   Todo lo que se construya con Elementor hereda el sistema de diseño sin
   tener que reconfigurarlo widget a widget.
   ========================================================================= */

.elementor-button,
.elementor-button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 48px;
	padding: 0 1.9rem;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: var(--cc-pill);
	background-color: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	transition: background-color var(--cc-t), border-color var(--cc-t), color var(--cc-t), transform var(--cc-t);
}

.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--wp--preset--color--teal-ink);
	border-color: var(--wp--preset--color--teal-ink);
	color: #fff;
	transform: translateY(-2px);
}

.cc-btn-ghost .elementor-button {
	background-color: transparent;
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--navy);
}

.cc-btn-ghost .elementor-button:hover {
	background-color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

.cc-dark .cc-btn-ghost .elementor-button {
	border-color: rgba(162, 211, 220, .4);
	color: #fff;
}

.cc-dark .cc-btn-ghost .elementor-button:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--navy);
}

.cc-btn-light .elementor-button {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--navy);
}

.cc-btn-light .elementor-button:hover {
	background-color: var(--wp--preset--color--teal-soft);
	border-color: var(--wp--preset--color--teal-soft);
	color: var(--wp--preset--color--navy-deep);
}

/* Antetítulo como clase de widget, para poder aplicarlo desde Elementor. */
.cc-eyebrow .elementor-heading-title,
.cc-eyebrow p {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-ink);
	line-height: 1.4;
}

.cc-eyebrow .elementor-heading-title::before,
.cc-eyebrow p::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: none;
}

.cc-dark .cc-eyebrow .elementor-heading-title,
.cc-dark .cc-eyebrow p {
	color: var(--wp--preset--color--teal-soft);
}

/* Los titulares y el texto de Elementor ya heredan la tipografía del tema;
   aquí solo se ajusta lo que Elementor deja a cero. */
.elementor-widget-heading .elementor-heading-title {
	margin: 0;
}

.cc-lead .elementor-widget-container > *,
.cc-lead p {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	max-width: 58ch;
}

.cc-dark .cc-lead p {
	color: rgba(229, 243, 245, .86);
}

/* Listas con marca, en la versión de Elementor. */
.cc-checks .elementor-icon-list-item {
	align-items: flex-start;
}

.cc-checks .elementor-icon-list-icon {
	margin-top: .2em;
}

.cc-checks .elementor-icon-list-icon i,
.cc-checks .elementor-icon-list-icon svg {
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: var(--cc-pill);
	background: var(--wp--preset--color--teal);
	color: #fff;
	font-size: .7rem;
}

.cc-dark .elementor-widget-text-editor,
.cc-dark .elementor-widget-icon-list .elementor-icon-list-text {
	color: rgba(229, 243, 245, .86);
}

.cc-dark .elementor-heading-title {
	color: #fff;
}

/* Tarjeta y pantalla de producto, aplicables desde el panel de Elementor. */
.cc-el-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-lg);
}

.cc-el-framed img,
.cc-el-framed svg {
	border-radius: var(--cc-radius-lg);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* =========================================================================
   Productos y proyectos — plantillas de catálogo y casos de estudio
   ========================================================================= */

/* Botón de plantilla clásica: mismo lenguaje que el botón de bloque. */
.cc-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .95rem 1.65rem;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: var(--cc-pill);
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--cc-t), color var(--cc-t), border-color var(--cc-t), transform var(--cc-t), box-shadow var(--cc-t);
}

.cc-btn:hover,
.cc-btn:focus-visible {
	background: var(--wp--preset--color--navy-deep);
	border-color: var(--wp--preset--color--navy-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -18px rgba(10, 42, 62, .75);
}

.cc-btn--fantasma {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--line);
}

.cc-btn--fantasma:hover,
.cc-btn--fantasma:focus-visible {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

.cc-dark .cc-btn {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--navy);
}

.cc-dark .cc-btn--fantasma {
	background: transparent;
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}

.cc-dark .cc-btn--fantasma:hover {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--navy);
}

/* Antetítulo fuera del editor de bloques. */
.cc-eyebrow--suelto {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-ink);
}

.cc-eyebrow--suelto::before {
	content: "";
	flex: none;
	width: 34px;
	height: 8px;
	background: var(--cc-wave) center / 100% 100% no-repeat;
}

.cc-eyebrow--suelto a {
	color: inherit;
	text-decoration: none;
}

.cc-dark .cc-eyebrow--suelto {
	color: var(--wp--preset--color--teal-soft);
}

/* ---------- Portada de catálogo y de casos ---------- */

.cc-catalogo__portada,
.cc-casos__portada,
.cc-caso__portada,
.cc-ficha__portada {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--gradient--deep-wave);
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.cc-catalogo__portada::after,
.cc-casos__portada::after,
.cc-caso__portada::after,
.cc-ficha__portada::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	height: 90px;
	background: var(--cc-wave-shape, none) bottom center / 100% 90px no-repeat;
	--cc-wave-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 46c160 38 320 44 480 20s320-58 480-46 320 52 480 60v10H0z' fill='%23ffffff'/%3E%3C/svg%3E");
	pointer-events: none;
}

.cc-catalogo__portada > .cc-wrap,
.cc-casos__portada > .cc-wrap,
.cc-caso__portada > .cc-wrap,
.cc-ficha__portada > .cc-wrap {
	position: relative;
	z-index: 1;
	padding-bottom: 2.5rem;
}

.cc-catalogo__titulo,
.cc-casos__titulo,
.cc-caso__titulo,
.cc-ficha__titulo {
	margin: 0;
	max-width: 18ch;
	font-size: clamp(2.5rem, 5.5vw, 4.25rem);
	text-wrap: balance;
}

.cc-catalogo__lead,
.cc-casos__lead,
.cc-caso__lead,
.cc-ficha__lead {
	margin: 1.75rem 0 0;
	color: rgba(255, 255, 255, .82);
	max-width: 62ch;
}

/* Riel de datos de la portada de productos. */
.cc-catalogo__rail {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.cc-rail__dato {
	display: grid;
	gap: .4rem;
}

.cc-rail__dato strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: #fff;
}

.cc-dark .cc-rail__label {
	color: var(--wp--preset--color--teal-soft);
}

/* ---------- Bandas de producto ---------- */

.cc-producto {
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

.cc-producto--fondo {
	background: var(--wp--preset--color--mist);
}

.cc-producto__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: clamp(2rem, 6vw, 4.5rem);
}

.cc-producto--invertido .cc-producto__vista {
	order: 2;
}

.cc-producto__vista {
	margin: 0;
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	box-shadow: 0 40px 80px -50px rgba(10, 42, 62, .65);
	background: #fff;
}

.cc-producto__vista img {
	display: block;
	width: 100%;
}

.cc-producto__indice {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--wp--preset--color--teal-ink);
}

.cc-producto__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--3xl);
}

.cc-producto__titulo a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--teal), var(--wp--preset--color--teal));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--cc-t);
}

.cc-producto__titulo a:hover {
	background-size: 100% 2px;
}

.cc-producto__extracto {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
}

.cc-producto__acciones,
.cc-destacado__acciones,
.cc-medida__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin: 2.25rem 0 0;
}

/* Etiquetas técnicas. */
.cc-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.cc-etiquetas li {
	padding: .4rem .9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-pill);
	background: #fff;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--teal-ink);
}

/* ---------- Banda «a medida» ---------- */

.cc-medida {
	padding-block: clamp(3rem, 7vw, 5rem);
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.cc-medida__inner {
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.cc-medida .cc-eyebrow--suelto {
	color: var(--wp--preset--color--teal-soft);
}

.cc-medida__titulo {
	margin: 0 0 1.25rem;
	color: #fff;
	font-size: var(--wp--preset--font-size--2xl);
	text-wrap: balance;
}

.cc-medida p {
	margin: 0;
	color: rgba(255, 255, 255, .82);
	max-width: 60ch;
}

.cc-medida__acciones {
	margin: 0;
	justify-content: flex-end;
}

.cc-medida .cc-btn {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--navy);
}

.cc-medida .cc-btn--fantasma {
	background: transparent;
	border-color: rgba(255, 255, 255, .38);
	color: #fff;
}

.cc-medida .cc-btn--fantasma:hover {
	background: #fff;
	color: var(--wp--preset--color--navy);
}

/* ---------- Filtros de sector ---------- */

.cc-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: clamp(2rem, 5vw, 2.75rem);
}

.cc-filtro {
	padding: .55rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--cc-pill);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: background-color var(--cc-t), border-color var(--cc-t), color var(--cc-t);
}

.cc-filtro:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.cc-filtro.is-activo {
	background: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--navy-deep);
}

/* ---------- Caso destacado ---------- */

.cc-destacado {
	padding-block: clamp(3rem, 7vw, 5rem);
}

.cc-destacado__inner {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: clamp(2rem, 6vw, 4.5rem);
}

.cc-destacado__vista {
	display: block;
	border-radius: var(--cc-radius-lg);
	overflow: hidden;
	background: var(--wp--preset--color--mist);
	box-shadow: 0 40px 80px -50px rgba(10, 42, 62, .65);
}

.cc-destacado__vista img {
	display: block;
	width: 100%;
	transition: transform 600ms var(--cc-ease);
}

.cc-destacado__vista:hover img {
	transform: scale(1.03);
}

.cc-destacado__marca {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: .35rem .85rem;
	border-radius: var(--cc-pill);
	background: var(--wp--preset--color--teal-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-deep);
}

.cc-destacado__titulo {
	margin: .5rem 0 0;
	font-size: var(--wp--preset--font-size--3xl);
}

.cc-destacado__titulo a {
	color: inherit;
	text-decoration: none;
}

.cc-destacado__titulo a:hover {
	color: var(--wp--preset--color--teal-ink);
}

.cc-destacado__extracto {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
}

/* ---------- Ficha técnica del caso ---------- */

.cc-ficha {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	margin: 2rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.cc-ficha__dato {
	display: grid;
	gap: .35rem;
}

.cc-ficha dt {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.cc-ficha dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.cc-ficha dd a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--teal);
}

.cc-dark .cc-ficha {
	border-top-color: rgba(255, 255, 255, .18);
}

.cc-dark .cc-ficha dt {
	color: var(--wp--preset--color--teal-soft);
}

.cc-dark .cc-ficha dd,
.cc-dark .cc-ficha dd a {
	color: #fff;
}

/* ---------- Rejilla de casos y estado vacío ---------- */

.cc-casos__resto {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--wp--preset--color--mist);
}

.cc-casos__subtitulo {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--2xl);
}

.cc-preparacion {
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.25rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-lg);
	background: #fff;
	text-align: center;
}

.cc-preparacion .cc-eyebrow--suelto {
	justify-content: center;
}

.cc-preparacion h2 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--2xl);
}

.cc-preparacion p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.cc-preparacion .cc-destacado__acciones {
	justify-content: center;
}

/* ---------- Caso de estudio ---------- */

.cc-caso__imagen {
	margin: 0;
	padding-block: clamp(2rem, 5vw, 3rem) 0;
}

.cc-caso__imagen img {
	display: block;
	width: 100%;
	border-radius: var(--cc-radius-lg);
	box-shadow: 0 40px 80px -50px rgba(10, 42, 62, .65);
}

.cc-caso__cuerpo {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.cc-caso .cc-entrada__contenido > h2 {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--2xl);
}

.cc-caso .cc-entrada__contenido > h2::before {
	content: "";
	display: block;
	width: 46px;
	height: 10px;
	margin-bottom: 1rem;
	background: var(--cc-wave) center / 100% 100% no-repeat;
}

.cc-caso .cc-entrada__contenido > h3 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xl);
}

.cc-caso .cc-entrada__contenido figure {
	margin-block: var(--wp--preset--spacing--50);
}

.cc-caso .cc-entrada__contenido figure img {
	border-radius: var(--cc-radius-md);
	border: 1px solid var(--wp--preset--color--line);
}

.cc-resultado {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	background: var(--wp--preset--color--mist);
}

.cc-resultado__texto {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	text-wrap: balance;
}

/* ---------- Navegación entre casos ---------- */

.cc-siguiente {
	padding-block: clamp(2rem, 5vw, 3.25rem);
	border-top: 1px solid var(--wp--preset--color--line);
}

.cc-siguiente__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5rem;
}

.cc-siguiente__enlace {
	display: grid;
	gap: .4rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	max-width: 26rem;
}

.cc-siguiente__enlace strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	transition: color var(--cc-t);
}

.cc-siguiente__enlace:hover strong {
	color: var(--wp--preset--color--teal-ink);
}

.cc-siguiente__enlace--der {
	text-align: right;
	margin-left: auto;
}

/* ---------- Adaptación a pantallas pequeñas ---------- */

@media (max-width: 900px) {

	.cc-producto__inner,
	.cc-destacado__inner,
	.cc-medida__inner {
		grid-template-columns: 1fr;
	}

	.cc-producto--invertido .cc-producto__vista {
		order: 0;
	}

	.cc-medida__acciones {
		justify-content: flex-start;
	}

	.cc-catalogo__titulo,
	.cc-casos__titulo,
	.cc-caso__titulo,
	.cc-ficha__titulo {
		max-width: none;
	}
}

@media (max-width: 600px) {

	.cc-catalogo__rail {
		gap: 1.25rem;
	}

	.cc-ficha {
		gap: 1.25rem 1.75rem;
	}

	.cc-siguiente__enlace--der {
		text-align: left;
		margin-left: 0;
	}

	.cc-producto__acciones .cc-btn,
	.cc-destacado__acciones .cc-btn,
	.cc-medida__acciones .cc-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cc-destacado__vista img,
	.cc-btn {
		transition: none;
	}

	.cc-destacado__vista:hover img {
		transform: none;
	}
}

.cc-tarjeta--caso {
	align-content: start;
}

.cc-tarjeta__mas {
	margin: 1.1rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--teal-ink);
}

.cc-tarjeta__mas span {
	display: inline-block;
	transition: transform var(--cc-t);
}

.cc-tarjeta--caso:hover .cc-tarjeta__mas span {
	transform: translateX(4px);
}

/* ---------- Placa: el rótulo que ocupa el sitio de la captura ---------- */

/* Marca de la casa donde iría la captura: no imita una pantalla ni repite el
   nombre del proyecto, solo ancla la tarjeta mientras llega la imagen. */
.cc-placa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem) 0;
}

.cc-placa__ola {
	flex: none;
	width: 56px;
	height: 10px;
	color: var(--wp--preset--color--teal);
}

.cc-placa__nota {
	padding: .2rem .7rem;
	border: 1px dashed var(--wp--preset--color--teal-soft);
	border-radius: var(--cc-pill);
	font-size: .6875rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

/* La marca ocupa la fila de la captura sin fingir que es una imagen. */
.cc-placa-hueco {
	background: none;
}

/* ---------- Tarjeta de caso: la captura manda, a sangre ---------- */

.wp-block-group.is-style-caso {
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cc-radius-lg);
	transition: transform var(--cc-t), box-shadow var(--cc-t), border-color var(--cc-t);
}

/* El grupo pasa a rejilla: sus hijos no arrastran los márgenes del flujo. */
.wp-block-group.is-style-caso > * {
	margin-block: 0;
}

.wp-block-group.is-style-caso:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--lift);
}

.is-style-caso > .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.is-style-caso > .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	border-radius: 0;
	transition: transform 600ms var(--cc-ease);
}

.is-style-caso:hover > .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.cc-caso-cuerpo {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.cc-caso-cuerpo .wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

.cc-caso-cuerpo .wp-block-post-title {
	line-height: 1.15;
	text-wrap: balance;
}

.cc-caso-cuerpo .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.is-style-caso:hover .cc-caso-cuerpo .wp-block-post-title a {
	color: var(--wp--preset--color--teal-ink);
}

/* El extracto crece y deja el enlace pegado abajo, así los cuatro «Leer el
   caso» quedan a la misma altura aunque los textos midan distinto. */
.cc-caso-cuerpo .wp-block-post-excerpt {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.cc-caso-cuerpo .wp-block-post-excerpt__excerpt {
	display: block;
}

.cc-caso-cuerpo .wp-block-post-excerpt__more-text {
	margin: 0;
	padding-top: 1.1rem;
	margin-top: auto;
}

.cc-caso-cuerpo .wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--teal-ink);
	text-decoration: none;
}

.cc-caso-cuerpo .wp-block-post-excerpt__more-link::after {
	content: "\2192";
	transition: transform var(--cc-t);
}

.is-style-caso:hover .cc-caso-cuerpo .wp-block-post-excerpt__more-link::after {
	transform: translateX(4px);
}

/* La rejilla del bucle de entradas no baja de columnas por su cuenta: en
   pantallas estrechas dos o tres columnas dejan los titulares en tiras. */
@media (max-width: 900px) {

	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 660px) {

	.wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-group.is-style-caso,
	.is-style-caso > .wp-block-post-featured-image img {
		transition: none;
	}

	.wp-block-group.is-style-caso:hover {
		transform: none;
	}

	.is-style-caso:hover > .wp-block-post-featured-image img {
		transform: none;
	}
}

/* Botonera de la portada de un caso o de una ficha sin contenido. */
.cc-caso__acciones,
.cc-ficha__acciones {
	margin: 2.25rem 0 0;
}

/* ---------- Páginas legales: leer un texto largo sin cansarse ---------- */

.cc-legal {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.75;
}

.cc-legal > h2 {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.cc-legal > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.cc-legal > p,
.cc-legal > ul,
.cc-legal > figure {
	margin-top: 1.25rem;
}

.cc-legal strong {
	color: var(--wp--preset--color--navy);
}

.cc-legal .wp-block-table {
	overflow-x: auto;
}

.cc-legal .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--sm);
}

.cc-legal .wp-block-table th,
.cc-legal .wp-block-table td {
	padding: .75rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	text-align: left;
}

.cc-legal .wp-block-table th {
	background: var(--wp--preset--color--mist);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}