/*
Theme Name: Collado Formación Child
Theme URI: https://colladoformacion.es/
Description: Child theme de Hello Elementor con el rediseño de Collado Formación: paleta azul marino y dorado, tipografías Poppins e Inter, slideshow de cabecera, tarjetas de programa y estilos de Contact Form 7. Pensado para usarse junto al kit de plantillas de Elementor incluido en el paquete.
Author: Nomadic
Template: hello-elementor
Version: 1.0.0
Text Domain: colladoformacion-child
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   Collado Formación — variables de marca
   Azul marino y dorado tomados del logotipo y de la maqueta de rediseño.
   ========================================================================== */
:root {
	--cf-navy:      #0A1E3F;
	--cf-navy-800:  #0B2247;
	--cf-navy-900:  #071730;
	--cf-gold:      #E9A93C;
	--cf-gold-2:    #F2B94E;
	--cf-bg:        #F7F8FA;
	--cf-bg-2:      #EFF1F5;
	--cf-text:      #5B6472;
	--cf-line:      rgba(233, 169, 60, .35);
	--cf-line-soft: rgba(10, 30, 63, .10);
	--cf-radius:    10px;
}

/* --------------------------------------------------------------- Base ---- */
.cf-eyebrow .elementor-heading-title,
.cf-eyebrow {
	color: var(--cf-gold);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.cf-title .elementor-heading-title {
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
}

/* Filete dorado corto bajo el título de sección. */
.cf-title--rule .elementor-heading-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 18px auto 0;
	background: var(--cf-gold);
}

.cf-title--rule.cf-left .elementor-heading-title::after {
	margin-left: 0;
}

.cf-lead {
	color: var(--cf-text);
	font-size: 16px;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cf-header {
	position: relative;
	z-index: 999;
	background-color: var(--cf-navy);
}

.cf-logo img {
	width: 200px;
	max-width: 100%;
	height: auto;
}

.cf-nav .elementor-nav-menu--main .elementor-item {
	padding: 30px 0;
	color: #FFF;
	fill: #FFF;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
}

.cf-nav .elementor-nav-menu--main .elementor-item:hover,
.cf-nav .elementor-nav-menu--main .elementor-item:focus,
.cf-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.cf-nav .elementor-nav-menu--main .elementor-item.highlighted {
	color: var(--cf-gold);
	fill: var(--cf-gold);
}

.cf-nav .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.cf-nav .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
	height: 3px;
	background-color: var(--cf-gold);
}

.cf-nav {
	--e-nav-menu-horizontal-menu-item-margin: calc(22px / 2);
	--nav-menu-icon-size: 26px;
}

.cf-nav .elementor-nav-menu--dropdown {
	background-color: var(--cf-navy-800);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

.cf-nav .elementor-nav-menu--dropdown a,
.cf-nav .elementor-menu-toggle {
	color: #FFF;
	fill: #FFF;
}

.cf-nav .elementor-nav-menu--dropdown .elementor-item,
.cf-nav .elementor-nav-menu--dropdown .elementor-sub-item {
	font-size: 14px;
}

.cf-nav .elementor-nav-menu--dropdown a:hover,
.cf-nav .elementor-nav-menu--dropdown a.elementor-item-active,
.cf-nav .elementor-nav-menu--dropdown a.highlighted {
	background-color: var(--cf-gold);
	color: var(--cf-navy);
}

/* Teléfono de cabecera con icono circular dorado. */
.cf-header-phone .elementor-icon-list-item {
	align-items: center;
}

.cf-header-phone .elementor-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cf-gold);
}

.cf-header-phone .elementor-icon-list-icon i {
	color: var(--cf-navy);
	font-size: 15px;
}

.cf-header-phone .elementor-icon-list-text {
	white-space: nowrap;
	color: #FFF;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
}

@media (max-width: 1400px) {
	.cf-nav .elementor-nav-menu--main .elementor-item {
		font-size: 13px;
	}

	.cf-nav {
		--e-nav-menu-horizontal-menu-item-margin: calc(14px / 2);
	}

	.cf-logo img {
		width: 178px;
	}
}

@media (max-width: 1024px) {
	.cf-nav .elementor-nav-menu--main .elementor-item {
		padding: 12px;
		font-size: 13px;
	}

	.cf-nav {
		--e-nav-menu-horizontal-menu-item-margin: 0;
	}
}

/* --------------------------------------------------------------------------
   Slideshow de cabecera
   Cuatro creatividades a pantalla completa: la imagen ya lleva su propio texto,
   así que el slider sólo aporta encuadre, navegación y accesibilidad.
   -------------------------------------------------------------------------- */
.cf-hero {
	background: var(--cf-navy);
}

.cf-hero {
	position: relative;
}

.cf-hero .cf-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .45s ease, visibility 0s linear .45s;
}

.cf-hero .cf-slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .45s ease;
}

@media (prefers-reduced-motion: reduce) {
	.cf-hero .cf-slide,
	.cf-hero .cf-slide.is-active {
		transition: none;
	}
}

.cf-hero .cf-slide img {
	display: block;
	width: 100%;
	height: auto;
}

.cf-hero__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 30, 63, .55);
	color: #FFF;
	font-size: 20px;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .2s ease, color .2s ease;
}

.cf-hero__nav:hover {
	background: var(--cf-gold);
	color: var(--cf-navy);
}

.cf-hero__nav--prev { left: 18px; }
.cf-hero__nav--next { right: 18px; }

.cf-hero__dots {
	position: absolute;
	bottom: 18px;
	left: 0;
	z-index: 3;
	width: 100%;
	text-align: center;
}

.cf-hero__dot {
	width: 11px;
	height: 11px;
	margin: 0 5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
}

.cf-hero__dot.is-active {
	background: var(--cf-gold);
}

@media (max-width: 767px) {
	.cf-hero__nav { width: 36px; height: 36px; font-size: 15px; }
	.cf-hero__nav--prev { left: 8px; }
	.cf-hero__nav--next { right: 8px; }
}

/* Franja de ventajas bajo el slider. */
.cf-hero-strip {
	background: var(--cf-navy);
}

.cf-hero-feature .elementor-icon-box-wrapper {
	gap: 10px;
}

.cf-hero-feature .elementor-icon {
	color: var(--cf-gold);
	fill: var(--cf-gold);
	font-size: 26px;
}

.cf-hero-feature .elementor-icon-box-title,
.cf-hero-feature .elementor-icon-box-title a {
	color: #FFF;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

/* Separadores verticales entre ventajas. */
.cf-hero-strip .elementor-column + .elementor-column .elementor-widget-wrap {
	border-left: 1px solid rgba(255, 255, 255, .15);
}

.cf-btn-gold .elementor-button {
	padding: 14px 30px;
	border: 2px solid var(--cf-gold);
	border-radius: 6px;
	background-color: var(--cf-gold);
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cf-btn-gold .elementor-button:hover {
	background-color: transparent;
	color: var(--cf-gold);
}

.cf-btn-ghost .elementor-button {
	padding: 14px 30px;
	border: 2px solid #FFF;
	border-radius: 6px;
	background-color: transparent;
	color: #FFF;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cf-btn-ghost .elementor-button:hover {
	background-color: #FFF;
	color: var(--cf-navy);
}

/* --------------------------------------------------------------------------
   Tarjetas de programa
   -------------------------------------------------------------------------- */
.cf-programs {
	background: var(--cf-bg);
}

.cf-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--cf-radius);
	background: var(--cf-navy);
	box-shadow: 0 16px 38px rgba(10, 30, 63, .16);
}

.cf-card-media img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.cf-card-body {
	padding: 26px 24px 28px;
}

.cf-card-title {
	margin: 0 0 12px;
	color: #FFF;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.cf-card-text {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	line-height: 1.65;
}

.cf-card-list {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.cf-card-list li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 28px;
	color: rgba(255, 255, 255, .9);
	font-size: 14px;
}

.cf-card-list li::before {
	content: "\f058"; /* check-circle */
	position: absolute;
	left: 0;
	color: var(--cf-gold);
	font-family: "Font Awesome 5 Free";
	font-size: 15px;
	font-weight: 900;
}

.cf-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 13px 22px;
	border-radius: 6px;
	background: var(--cf-gold);
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	justify-content: center;
	transition: background .2s ease;
}

.cf-card-btn:hover {
	background: var(--cf-gold-2);
	color: var(--cf-navy);
}

.cf-quote-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cf-card-inner .cf-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.cf-card-inner .cf-card-list {
	flex: 1;
}

/* --------------------------------------------------------------------------
   Franja de seis ventajas
   -------------------------------------------------------------------------- */
.cf-benefits > .elementor-container,
.cf-benefits > .e-con-inner {
	border-radius: var(--cf-radius);
	background: #FFF;
	box-shadow: 0 10px 26px rgba(10, 30, 63, .07);
}

.cf-benefit .elementor-icon {
	color: var(--cf-navy);
	fill: var(--cf-navy);
	font-size: 26px;
}

.cf-benefit .elementor-icon-box-title,
.cf-benefit .elementor-icon-box-title a {
	color: var(--cf-navy);
	font-family: "Inter", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
}

.cf-benefits .elementor-column + .elementor-column .elementor-widget-wrap {
	border-left: 1px solid var(--cf-line-soft);
}

/* --------------------------------------------------------------------------
   Banda de cifras
   -------------------------------------------------------------------------- */
.cf-stats {
	position: relative;
	background-color: var(--cf-navy);
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1.4px, transparent 1.4px);
	background-size: 16px 16px;
}

.cf-stat .elementor-icon-box-title,
.cf-stat .elementor-icon-box-title a {
	margin-block-end: 2px;
	color: #FFF;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
}

.cf-stat .elementor-icon-box-description {
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
}

.cf-stats .elementor-column + .elementor-column .elementor-widget-wrap {
	border-left: 1px solid rgba(255, 255, 255, .14);
}

.cf-stats-badge .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border: 2px solid var(--cf-gold);
	border-radius: 50%;
	color: var(--cf-gold);
	font-size: 26px;
}

/* --------------------------------------------------------------------------
   ¿Por qué elegirnos?
   -------------------------------------------------------------------------- */
.cf-why {
	background: var(--cf-bg);
}

.cf-why-item .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--cf-navy);
	color: var(--cf-gold);
	font-size: 18px;
}

.cf-why-item .elementor-icon-box-title,
.cf-why-item .elementor-icon-box-title a {
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
}

.cf-why-item .elementor-icon-box-description {
	color: var(--cf-text);
	font-size: 14px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Testimonios
   -------------------------------------------------------------------------- */
.cf-testimonials {
	background: var(--cf-bg-2);
}

.cf-quote-inner {
	height: 100%;
	padding: 22px 22px 20px;
	border: 1px solid var(--cf-line-soft);
	border-radius: var(--cf-radius);
	background: #FFF;
}

.cf-quote-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.cf-quote-avatar {
	width: 62px;
	height: 62px;
	flex: 0 0 62px;
	border-radius: 6px;
	object-fit: cover;
}

.cf-stars {
	color: var(--cf-gold);
	font-size: 13px;
	letter-spacing: 2px;
}

.cf-quote-text {
	margin: 0 0 14px;
	color: var(--cf-text);
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
}

.cf-quote-name {
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.cf-quote-role {
	color: var(--cf-gold);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Llamada final
   -------------------------------------------------------------------------- */
.cf-final {
	position: relative;
	overflow: hidden;
	background: var(--cf-navy);
}

/* Onda dorada del borde derecho, como en la maqueta. */
.cf-final::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 300px;
	max-width: 30%;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M120 0 C 210 60, 90 140, 190 200 L300 200 L300 0 Z' fill='%23E9A93C'/%3E%3Cpath d='M170 0 C 260 60, 140 140, 240 200 L300 200 L300 0 Z' fill='%230B2247'/%3E%3C/svg%3E") no-repeat right center / 100% 100%;
	pointer-events: none;
}

.cf-final > .elementor-container,
.cf-final > .e-con-inner {
	position: relative;
	z-index: 1;
}

.cf-final-badge .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border: 2px solid var(--cf-gold);
	border-radius: 50%;
	color: var(--cf-gold);
	font-size: 28px;
}

.cf-final-title .elementor-heading-title {
	color: #FFF;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.35;
}

.cf-final-title .elementor-heading-title em {
	color: var(--cf-gold);
	font-style: normal;
}

.cf-final-label {
	color: rgba(255, 255, 255, .8);
	font-size: 12px;
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
}

.cf-btn-outline-gold .elementor-button {
	padding: 12px 26px;
	border: 2px solid var(--cf-gold);
	border-radius: 6px;
	background: transparent;
	color: var(--cf-gold);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cf-btn-outline-gold .elementor-button:hover {
	background: var(--cf-gold);
	color: var(--cf-navy);
}

/* --------------------------------------------------------------------------
   Cabecera de página interior
   -------------------------------------------------------------------------- */
.cf-page-header {
	position: relative;
	background-color: var(--cf-navy);
	background-image: radial-gradient(rgba(255, 255, 255, .07) 1.4px, transparent 1.4px);
	background-size: 16px 16px;
}

.cf-page-title .elementor-heading-title {
	color: #FFF;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}

.cf-page-sub {
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
}

.cf-breadcrumb {
	color: rgba(255, 255, 255, .6);
	font-size: 13px;
}

.cf-breadcrumb a {
	color: var(--cf-gold);
}

/* --------------------------------------------------------------------------
   Contenido de páginas interiores
   -------------------------------------------------------------------------- */
.cf-body-text {
	color: var(--cf-text);
	font-size: 16px;
	line-height: 1.85;
}

.cf-checklist .elementor-icon-list-icon i {
	color: var(--cf-gold);
}

.cf-checklist .elementor-icon-list-text {
	color: var(--cf-navy);
	font-size: 15px;
}

.cf-chip {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 7px 15px;
	border: 1px solid var(--cf-line);
	border-radius: 40px;
	background: #FFF;
	color: var(--cf-navy);
	font-size: 13px;
	font-weight: 500;
}

.cf-module {
	height: 100%;
	padding: 22px 22px 18px;
	border: 1px solid var(--cf-line-soft);
	border-left: 4px solid var(--cf-gold);
	border-radius: var(--cf-radius);
	background: #FFF;
}

.cf-module-title {
	margin: 0 0 10px;
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
}

.cf-module ul {
	margin: 0;
	padding-left: 18px;
	color: var(--cf-text);
	font-size: 14px;
	line-height: 1.7;
}

.cf-course-card {
	height: 100%;
	padding: 22px 20px;
	border: 1px solid var(--cf-line-soft);
	border-radius: var(--cf-radius);
	background: #FFF;
	transition: transform .2s ease, box-shadow .2s ease;
}

.cf-course-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(10, 30, 63, .12);
}

.cf-course-card .elementor-icon {
	color: var(--cf-gold);
	font-size: 30px;
}

.cf-course-card .elementor-icon-box-title,
.cf-course-card .elementor-icon-box-title a {
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
}

.cf-course-card .elementor-icon-box-description {
	color: var(--cf-text);
	font-size: 14px;
	line-height: 1.6;
}

.cf-price-card {
	height: 100%;
	padding: 30px 26px;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-radius);
	background: #FFF;
	text-align: center;
}

.cf-price-card--featured {
	background: var(--cf-navy);
}

.cf-price-name {
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
}

.cf-price-amount {
	margin: 8px 0 16px;
	color: var(--cf-gold);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 32px;
	font-weight: 700;
}

.cf-price-card--featured .cf-price-name {
	color: #FFF;
}

.cf-price-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	color: var(--cf-text);
	font-size: 14px;
	line-height: 2;
}

.cf-price-card--featured .cf-price-list {
	color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   Fichas de contacto (rejilla 2x2 con icono a la izquierda)
   -------------------------------------------------------------------------- */
.cf-contact-card {
	height: 100%;
	padding: 16px 14px;
	border: 1px solid var(--cf-line-soft);
	border-radius: var(--cf-radius);
	background: #FFF;
}

.cf-contact-card .elementor-icon-box-wrapper {
	align-items: center;
	gap: 11px;
}

.cf-contact-card .elementor-icon {
	margin-bottom: 0;
	color: var(--cf-gold);
	font-size: 20px;
}

.cf-contact-card .elementor-icon-box-title,
.cf-contact-card .elementor-icon-box-title a {
	margin-bottom: 2px;
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
}

.cf-contact-card .elementor-icon-box-description {
	color: var(--cf-text);
	font-size: 12.5px;
	line-height: 1.5;
	/* El correo es largo: que rompa sólo si de verdad no cabe. */
	overflow-wrap: anywhere;
	word-break: normal;
}

/* --------------------------------------------------------------------------
   Páginas legales y mapa del sitio
   -------------------------------------------------------------------------- */
.cf-legal-title .elementor-heading-title {
	margin-top: 14px;
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 21px;
	font-weight: 600;
}

.cf-legal-list {
	color: var(--cf-text);
	font-size: 16px;
	line-height: 1.8;
}

.cf-legal-list ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

.cf-legal-list li {
	margin-bottom: 8px;
}

.cf-legal-list strong {
	color: var(--cf-navy);
}

.cf-legal-note {
	padding: 16px 20px;
	border-left: 4px solid var(--cf-gold);
	border-radius: 4px;
	background: var(--cf-bg);
	color: var(--cf-text);
	font-size: 15px;
	line-height: 1.7;
}

.cf-legal-note p {
	margin: 0;
}

.cf-sitemap,
.cf-sitemap ul {
	margin: 0 0 10px;
	padding-left: 20px;
	color: var(--cf-text);
	font-size: 16px;
	line-height: 1.9;
}

.cf-sitemap a {
	color: var(--cf-navy);
}

.cf-sitemap a:hover {
	color: var(--cf-gold);
}

.cf-sitemap span {
	color: var(--cf-text);
}

/* --------------------------------------------------------------------------
   Contact Form 7
   -------------------------------------------------------------------------- */
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid #D7DCE4;
	border-radius: 6px;
	background: #FFF;
	color: var(--cf-navy);
	font-size: 15px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-color: var(--cf-gold);
	box-shadow: 0 0 0 3px rgba(233, 169, 60, .2);
}

.wpcf7 textarea.wpcf7-form-control {
	min-height: 150px;
	resize: vertical;
}

.wpcf7 p {
	margin-bottom: 16px;
}

.wpcf7 label {
	display: block;
	margin-bottom: 6px;
	color: var(--cf-navy);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wpcf7 .wpcf7-acceptance label {
	display: inline;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.wpcf7 .wpcf7-acceptance a {
	color: var(--cf-gold);
	text-decoration: underline;
}

.wpcf7 .wpcf7-submit {
	display: inline-block;
	padding: 14px 40px;
	border: 2px solid var(--cf-gold);
	border-radius: 6px;
	background: var(--cf-gold);
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.wpcf7 .wpcf7-submit:hover {
	background: transparent;
	color: var(--cf-navy);
}

.wpcf7 .wpcf7-not-valid-tip {
	color: #C0392B;
	font-size: 13px;
}

.wpcf7 .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border-width: 1px;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.cf-footer {
	background: var(--cf-navy-900);
}

.cf-footer-title .elementor-heading-title {
	color: var(--cf-gold);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
}

.cf-footer-list .elementor-icon-list-icon i {
	color: var(--cf-gold);
	fill: var(--cf-gold);
	font-size: 13px;
}

.cf-footer-list .elementor-icon-list-text {
	color: rgba(255, 255, 255, .78);
	font-size: 13.5px;
}

.cf-footer-list .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--cf-gold);
}

.cf-footer-text {
	color: rgba(255, 255, 255, .7);
	font-size: 13.5px;
	line-height: 1.7;
}

.cf-footer-social .elementor-social-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .1);
	color: #FFF;
	font-size: 15px;
}

.cf-footer-social .elementor-social-icon:hover {
	background-color: var(--cf-gold);
	color: var(--cf-navy);
}

/* Campo de newsletter con botón circular dorado. */
.cf-newsletter form {
	display: flex;
	align-items: center;
	gap: 0;
	overflow: hidden;
	max-width: 340px;
	border-radius: 40px;
	background: #FFF;
}

.cf-newsletter input[type="email"] {
	flex: 1;
	padding: 12px 18px;
	border: 0;
	background: transparent;
	color: var(--cf-navy);
	font-size: 14px;
}

.cf-newsletter input[type="email"]:focus {
	outline: none;
}

.cf-newsletter button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: 4px;
	border: 0;
	border-radius: 50%;
	background: var(--cf-gold);
	color: var(--cf-navy);
	cursor: pointer;
}

.cf-footer-bottom {
	background: #050F20;
}

.cf-footer-bottom,
.cf-footer-bottom p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, .55);
	font-size: 12.5px;
}

/* Franja de enlaces legales de la barra inferior.
   Van aquí y no en una columna del pie para que estén a la vista en todas las
   páginas sin tener que recorrer el pie entero. */
.cf-legal-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 0;
}

.cf-legal-strip a {
	position: relative;
	padding: 0 14px;
	color: rgba(255, 255, 255, .62);
	font-size: 12.5px;
	line-height: 1.4;
	white-space: nowrap;
}

.cf-legal-strip a:hover {
	color: var(--cf-gold);
}

/* Separador en punto medio entre enlaces, salvo antes del primero. */
.cf-legal-strip a + a::before {
	content: "·";
	position: absolute;
	left: -2px;
	color: rgba(255, 255, 255, .3);
}

@media (max-width: 900px) {
	.cf-legal-strip {
		margin: 10px 0;
	}
}

/* Crédito de autoría, con el mismo icono de 20 px que usa el pie de Sonridental.
   Se alinea con text-align sobre un inline-flex: Elementor genera su propio CSS
   de alineación para el image-box y pisaría un justify-content. */
.cf-footer-credit {
	display: flex;
	justify-content: flex-end;
}

.cf-footer-credit .elementor-image-box-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-align: left;
}

.cf-footer-credit .elementor-image-box-img {
	flex: 0 0 20px;
	width: 20px;
	margin: 0;
}

.cf-footer-credit .elementor-image-box-img img {
	display: block;
	width: 20px;
	height: 20px;
}

.cf-footer-credit .elementor-image-box-content {
	flex: 0 0 auto;
}

.cf-footer-credit .elementor-image-box-title {
	margin: 0;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 400;
}

.cf-footer-credit .elementor-image-box-title,
.cf-footer-credit .elementor-image-box-title a {
	color: rgba(255, 255, 255, .55);
}

.cf-footer-credit .elementor-image-box-title a:hover {
	color: var(--cf-gold);
}

@media (max-width: 900px) {
	.cf-footer-credit {
		margin-top: 8px;
		justify-content: center;
	}

	.cf-footer-bottom p {
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */
.cf-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
	color: #FFF;
	transition: transform .2s ease;
}

.cf-whatsapp:hover,
.cf-whatsapp:focus {
	transform: scale(1.08);
	color: #FFF;
}

.cf-whatsapp svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

@media (max-width: 767px) {
	.cf-title .elementor-heading-title { font-size: 26px; }
	.cf-page-title .elementor-heading-title { font-size: 28px; }
	.cf-stat .elementor-icon-box-title { font-size: 30px; }

	.cf-benefits .elementor-column + .elementor-column .elementor-widget-wrap,
	.cf-stats .elementor-column + .elementor-column .elementor-widget-wrap,
	.cf-hero-strip .elementor-column + .elementor-column .elementor-widget-wrap {
		border-left: 0;
	}

	.cf-whatsapp {
		right: 14px;
		bottom: 14px;
		width: 50px;
		height: 50px;
	}
}

/* --------------------------------------------------------------------------
   Botón de WhatsApp y banner de cookies
   Complianz coloca el banner a todo el ancho y pegado abajo en pantallas de
   768px o menos, así que el botón flotante de WhatsApp le caería encima. En
   escritorio no hay conflicto porque el banner va abajo a la izquierda y sólo
   ocupa 526px. Mientras el banner esté a la vista, retiramos el botón: el
   visitante decide primero sobre las cookies y luego recupera el acceso.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	body:has(.cmplz-cookiebanner.cmplz-show) .cf-whatsapp {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Cabecera en móvil: todo en una sola línea
   Elementor apila las tres columnas por debajo de 767px, así que el logo, la
   hamburguesa y el teléfono acaban a tres alturas distintas. Las devolvemos a
   una única fila y reordenamos: logo a la izquierda, teléfono a continuación y
   el botón de menú al extremo derecho, que es donde se espera encontrarlo.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.cf-header > .elementor-container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}

	.cf-header > .elementor-container > .elementor-column {
		width: auto;
	}

	/* El logo conserva su tamaño y empuja al resto hacia la derecha. No lleva
	   min-width:0 a propósito: con él, el flex lo comprimía hasta hacerlo
	   desaparecer, porque la imagen tiene max-width:100% y el contenedor
	   colapsaba. */
	.cf-header > .elementor-container > .elementor-column:nth-child(1) {
		flex: 0 0 auto;
		order: 1;
		margin-right: auto;
	}

	.cf-header .cf-logo,
	.cf-header .cf-header-phone {
		flex-shrink: 0;
	}

	.cf-header > .elementor-container > .elementor-column:nth-child(3) {
		flex: 0 0 auto;
		order: 2;
	}

	.cf-header > .elementor-container > .elementor-column:nth-child(2) {
		flex: 0 0 auto;
		order: 3;
	}

	.cf-header .elementor-widget-wrap {
		padding: 6px 0;
	}

	.cf-logo img {
		width: 158px;
	}

	/* La hamburguesa venía centrada dentro de su columna. */
	.cf-nav .elementor-menu-toggle {
		margin: 0;
	}

	.cf-header-phone .elementor-icon-list-text {
		font-size: 15px;
	}

	.cf-header-phone .elementor-icon-list-icon {
		width: 30px;
		height: 30px;
	}
}

/* Por debajo de 480px no caben logo, número y menú a la vez. Ocultamos el
   número pero conservamos el círculo dorado, que sigue siendo un enlace tel:
   y por tanto pulsable: no se pierde la función, sólo el texto. */
@media (max-width: 480px) {
	.cf-logo img {
		width: 130px;
	}

	.cf-header-phone .elementor-icon-list-text {
		display: none;
	}

	.cf-header-phone .elementor-icon-list-item > a {
		gap: 0;
	}
}

/* --------------------------------------------------------------------------
   Botones del hero en móvil
   Los dos botones llevan alineación opuesta desde Elementor —uno a la derecha
   y otro a la izquierda—, algo que funciona cuando van en paralelo pero que
   los deja escalonados en cuanto las columnas se apilan. Los centramos.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.cf-btn-gold.elementor-align-right,
	.cf-btn-ghost.elementor-align-left,
	.cf-btn-gold.elementor-align-right .elementor-button-wrapper,
	.cf-btn-ghost.elementor-align-left .elementor-button-wrapper {
		text-align: center;
	}

	/* Mismo ancho en ambos para que la pila quede alineada. */
	.cf-btn-gold .elementor-button,
	.cf-btn-ghost .elementor-button {
		min-width: 230px;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Franja de ventajas en móvil: rejilla de dos por fila
   Elementor apila las cuatro columnas una debajo de otra, lo que obliga a
   recorrer cuatro pantallazos para leer cuatro frases cortas. A dos por fila
   se abarca de un vistazo y se reduce el scroll a la mitad.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.cf-hero-strip > .elementor-container {
		display: flex;
		flex-wrap: wrap;
	}

	.cf-hero-strip > .elementor-container > .elementor-column {
		width: 50%;
	}

	.cf-hero-strip .elementor-widget-wrap {
		padding: 18px 12px;
	}

	/* Recuperamos el filete vertical del escritorio, pero sólo entre las dos
	   columnas de una misma fila: con `+ .elementor-column` también saldría a
	   la izquierda de la tercera, que abre fila y no debe llevarlo. */
	.cf-hero-strip .elementor-column:nth-child(even) .elementor-widget-wrap {
		border-left: 1px solid rgba(255, 255, 255, .15);
	}

	.cf-hero-feature .elementor-icon-box-title,
	.cf-hero-feature .elementor-icon-box-title a {
		font-size: 12px;
		line-height: 1.4;
	}
}

/* --------------------------------------------------------------------------
   Filas de tarjetas incompletas
   El generador reparte las tarjetas de tres en tres y rellena la última fila
   con columnas vacías para mantener la cuadrícula. Con cinco tarjetas eso deja
   dos pegadas a la izquierda y un hueco a la derecha. Ocultamos la columna de
   relleno —la que no contiene ningún widget— y centramos lo que quede.
   -------------------------------------------------------------------------- */
.cf-card-row > .elementor-container {
	justify-content: center;
}

.cf-card-row > .elementor-container > .elementor-column:not(:has(.elementor-widget)) {
	display: none;
}

/* --------------------------------------------------------------------------
   Blog
   Cuadrícula de tres artículos en escritorio, con tarjetas homogéneas y una
   llamada a la acción clara. En tablet y móvil reduce columnas de forma fluida.
   -------------------------------------------------------------------------- */
.cf-blog-archive {
	width: min(100% - 40px, 1200px);
	margin: 0 auto;
	padding: 56px 0 72px;
}

.cf-blog-header {
	margin-bottom: 32px;
	text-align: center;
}

.cf-blog-eyebrow {
	margin: 0 0 6px;
	color: var(--cf-gold);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.cf-blog-header .entry-title {
	margin: 0;
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: clamp(34px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.15;
}

.cf-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.cf-blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--cf-line-soft);
	border-radius: 12px;
	background: #FFF;
	box-shadow: 0 12px 30px rgba(10, 30, 63, .10);
	transition: transform .2s ease, box-shadow .2s ease;
}

.cf-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(10, 30, 63, .16);
}

.cf-blog-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--cf-bg-2);
}

.cf-blog-card__media .wp-post-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform .3s ease;
}

.cf-blog-card:hover .cf-blog-card__media .wp-post-image {
	transform: scale(1.025);
}

.cf-blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px;
}

.cf-blog-card__title {
	margin: 0 0 14px;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

.cf-blog-card__title a {
	color: var(--cf-navy);
}

.cf-blog-card__title a:hover {
	color: var(--cf-gold);
}

.cf-blog-card__excerpt {
	margin-bottom: 22px;
	color: var(--cf-text);
	font-size: 14px;
	line-height: 1.7;
}

.cf-blog-card__excerpt p {
	margin: 0;
}

.cf-blog-card__button {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 9px;
	margin-top: auto;
	padding: 11px 18px;
	border-radius: 6px;
	background: var(--cf-gold);
	color: var(--cf-navy);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease;
}

.cf-blog-card__button:hover,
.cf-blog-card__button:focus {
	background: var(--cf-navy);
	color: #FFF;
}

.cf-blog-archive .pagination {
	margin-top: 38px;
}

@media (max-width: 900px) {
	.cf-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cf-blog-archive {
		width: min(100% - 28px, 1200px);
		padding: 38px 0 52px;
	}

	.cf-blog-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}