/* Paquete básico de reglas */

:root {
	--defaultBackgroundColor: #fff;
	--primaryBrandColor: #000;
	--primaryHoverColor: #222;
	--secondaryBrandColor: #000;
	--mutedColor: #F8F0F0;
	--formInputColor: #F8F0F0;
}

::selection {
  background-color: var(--primaryBrandColor);
  color: white; /* o el color que contraste mejor con tu secundario */
}

/* Backgrounds */

body {
	background-color: var(--defaultBackgroundColor);
	color: black;
}

em {
	color: inherit;
}

.uk-background-default {
	background-color: var(--defaultBackgroundColor);
}

.uk-background-white {
	background-color: white;
}

.uk-background-muted.uk-background-muted {
	background-color: var(--mutedColor);
}

.uk-section-muted {
	background-color: var(--mutedColor);
}

.uk-background-muted-darker a {
	color: #524d47;
}

/* Offcanvas Bar */

.uk-offcanvas-bar {
	background-color: var(--mutedColor);
	width: calc(100vw);
}

.uk-offcanvas-bar a {
	color: var(--primaryBrandColor)!important;
}

.uk-offcanvas-bar ul.menu-large li a {
	font-size: clamp(4rem, 2vw, 7rem); /* Tamaño de letra fluido */
}

.uk-offcanvas-bar ul.menu-large li ul {
	padding-left: 0;
}

.uk-offcanvas-bar ul.menu-large li ul li a {
	font-size: clamp(1.75rem, 2vw, 3.5rem); /* Tamaño de letra fluido */
}

.idioma {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-align: center;
	padding: 2px 8px;
}

.idioma-seleccionado {
	border: 1px solid var(--primaryBrandColor);
}

.uk-offcanvas-bar .logo {
	filter: grayscale(100);
	opacity: 0.15;
}

.uk-background-body {
	background-color: #fffdfa;	
}

.uk-border-rounded-xl {
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}

.uk-border-rounded-xl:not(.uk-overflow-visible) {
	overflow: hidden;
}

.logo {
	width: 200px;
	max-width: 30vw;
}

.uk-padding-xlarge {
	padding: 160px;
}

.uk-light * {
	color: white!important;
}

/* Font family */

body {
	font-family: "Inter", sans-serif;
}

.uk-text-medium {
	font-size: 1.25rem;
}

h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading, .serif {
	
}

.uk-heading-large {
	font-size: 4rem;
}

.uk-text-lead {
	font-size: 1.75rem!important;
}

/* Overlay */

.uk-overlay-primary {
	transition: all linear 0.2s;
	background-color: rgba(0,0,0, 0.45);
}

a .uk-overlay-primary:hover {
	transition: all linear 0.2s;
	background-color: rgba(0,0,0, 0.69);
}

.uk-light {
	color: white; !important;
}

.text-white, .uk-text-white {
	color: white; !important;
}

.uk-text-primary {
	color: var(--primaryBrandColor)!important;
}

.text-nomargin > p:first-child {
	margin-top: 0;
	margin-bottom: 0;
}

.uk-h1.uk-h1 {
	margin-bottom: initial;
}

.uk-slideshow-nav {
	display: none;
}

h1,.uk-h1,h2,.uk-h2,h3,.uk-h3 {
	line-height: 1; !important;
}

h1, .uk-h1 {
	font-size: 67px;
}

h2, .uk-h2 {
	font-size: 50px;
}

h3, .uk-h3 {
	font-size: 32px;
}

.rounded-full {
	border-radius: 9999px;
}

.background-layer {
	position: fixed;
	z-index: 0;
	overflow: hidden;
	width: 100vw;
	min-height: calc(100vh - 80px);
}

.dummy-background {
	min-height: calc(100vh - 80px);
	width: 100vw;
}

header.uk-sticky.uk-active {
	box-shadow: 0px 0px 8px rgba(77, 54, 39,0.08);
}

.header-img {
	position: fixed;
	z-index: 0;
	overflow: hidden;
	width: 100vw;
	aspect-ratio: 3/1;
}

.dummy-header {
	width: 100vw;
	aspect-ratio: 3/1;
}

.uk-container-to-right {
	margin-right: calc(-15vw)!important;
}

.uk-zindex {
	z-index: 10;
}

.wrapper .seccion:not(:first-child) {
	position: relative;
}

.uk-link, a {
	color: var(--primaryBrandColor);
}

a.uk-link-text:hover {
	color: var(--primaryBrandColor);
}

a:hover {
	text-decoration: none;
}

.uk-link:hover, a:hover {
	color: var(--primaryHoverColor);
}

.uk-button.uk-button {
	border-radius: 9999px;
}

.uk-background-primary {
	background-color: var(--primaryBrandColor);
}

.uk-background-secondary {
	background-color: var(--secondaryBrandColor);
}

/* Botones */

.uk-button {
	text-transform: none;
	font-weight: bolder;
	letter-spacing: 1px;
}

.btn-with-arrow {
	padding-left: 52px!important;
}

.btn-with-arrow.uk-button-large {
	padding-left: 62px!important;
}

.btn-with-arrow i {
  margin-left: 0.5em;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.4s ease;
}

.btn-with-arrow:hover i {
  opacity: 1;
  transform: translateX(0);
}

.uk-link-text.btn-with-arrow i {
	opacity: 0.5;
	transform: translateX(0px);
}

.uk-link-text.btn-with-arrow:hover i {
	opacity: 1;
	transform: translateX(12px);
}

.uk-button {
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

.uk-button-primary {
	background-color: var(--primaryBrandColor);
}

.uk-button-primary.uk-button-primary:hover {
	background-color: var(--primaryHoverColor);
}

.uk-button-secondary {
	background-color: var(--secondaryBrandColor);
}

/* Formularios */

.uk-input, .uk-textarea {
	background-color: var(--defaultBackgroundColor);
}

.uk-input::placeholder, .uk-textarea::placeholder {
  color: var(--mutedColor);
  opacity: 1;
}

.uk-input:focus, .uk-input:active, .uk-textarea:focus, .uk-textarea:active {
	border: 1px solid transparent;
}

#info .uk-form-label {
	visibility: hidden;
}

/* Menu lateral */

#navLateral {
	position: fixed;
	right: 0;
	top: 50vh;
	transform: translateY(-50%);
	width: 66px;
}

#navLateral ul {
	row-gap: 2px;
	display: flex;
	flex-direction: column;
}

#navLateral ul li {
	box-sizing: content-box;
	margin: 0;
}

#navLateral ul li a {
	display: block;
	padding: 0 20px;
	background-color: rgba(255, 255, 255, 0.15);
	text-align: center;
	line-height: 66px;
	font-size: 1.75rem;
	-webkit-transition: ease-in-out, .3s ease-in-out;
	transition: ease-in-out, .3s ease-in-out;
}

#navLateral ul li a:hover {
	background-color: var(--primaryBrandColor);
	transition: all linear 0.2s;
	margin-left: -10px;
	padding-right: 25px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
}

#navLateral ul li a {
	color: white;
}

#offcanvas-nav-primary img {
	height: 32px;
	filter: grayscale(1);
	mix-blend-mode: multiply;
}


/* Específicas */

footer {
	overflow-x: hidden;
}

.grid-productos .uk-card {
	padding: 40px;
	background-color: #fafafa;
}

.grid-productos .uk-card img {
	height: 60px;
}

.grid-productos .uk-card h4 {
	margin-top: 15px;
}

.grid-servicios img {
	height: 60px;
}

.logos-footer img {
	height: 32px;
	width: auto;
}

.horario {
	display: none;
}

.enero .horario.horario-invierno, .febrero .horario.horario-invierno, .marzo .horario.horario-invierno, .noviembre .horario.horario-invierno, .diciembre .horario.horario-invierno {
	display: block;
}

.abril .horario.horario-verano, .mayo .horario.horario-verano, .junio .horario.horario-verano, .julio .horario.horario-verano, .agosto .horario.horario-verano, .septiembre .horario.horario-verano {
	display: block;
}

.scroll-icon {
  animation: floatDownUp 3s ease-in-out infinite;
  opacity: 0.8;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 500px;
  -moz-border-radius: 500px;
  -webkit-border-radius: 500px;
  text-align: center;
  background-color: rgba(0,0,0, 0.25);
}

.square-image {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
}

@keyframes floatDownUp {
  0%, 100% {
	transform: translateY(0);
  }
  50% {
	transform: translateY(10px);
  }
}

.img-multiply {
	mix-blend-mode: multiply;
}

/*
	Preload
	
*/

#preload * {
	opacity: 0.65;
}

#preload .logo-preload {
	filter: grayscale(100) brightness(50);
	transform: translateX(4%);
	opacity: 0.25;
}

/*

	ON OFF SWITCHER FOR COOKIES
	https://proto.io/freebies/onoff/
	
	
*/

.onoffswitch {
	position: relative; width: 40px;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.onoffswitch-label {
	display: block; overflow: hidden; cursor: pointer;
	height: 20px; padding: 0; line-height: 20px;
	border: 2px solid #E3E3E3; border-radius: 20px;
	background-color: #E8E8E8;
	transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
	content: "";
	display: block; width: 20px; margin: 0px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	right: 16px;
	border: 2px solid #E3E3E3; border-radius: 20px;
	transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
	background-color: var(--primaryBrandColor);
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: var(--primaryBrandColor);
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
	right: 0px; 
}

#navbar .logo {
	height: 70px;
	width: auto;
}

/* Media Queries */

@media (max-width: 960px) {
	
	h1, .uk-h1 {
		font-size: 2.2rem;
	}

	
	.uk-heading-large {
		font-size: 2.2rem;
	}
	
	.uk-text-lead {
		font-size: 1.3rem;
	}
	
	#navLateral {
		width: 46px;
	}
	
	#navLateral ul li a {
		padding: 0 5px;
		line-height: 46px;
		font-size: 1.15rem;
	}
	
	.uk-button {
		font-size: 0.775rem;
	}
	
	.uk-button.uk-button-large.btn-with-arrow {
		padding-left: 40px;
	}
	
	.uk-button.btn-wixth-arrow i {
		display: none;
	}

}


/* =============================================================================
 *  CERÁMICA HORECA — Landings SEO (.ch-*)
 * ========================================================================== */

:root {
	/* Marca */
	--ch-brand:        #0E4FAD;       /* azul de marca Cerámica Horeca */
	--ch-brand-hover:  #0a3d8a;       /* hover sobre primary */
	--ch-brand-deep:   #082a66;       /* azul profundo, para banner */
	--ch-brand-soft:   #e7eef9;       /* azul muy claro para fondos sutiles */

	/* Neutros cálidos (todavía con base cerámica/cream) */
	--ch-bg:           #faf7f0;       /* fondo principal cream */
	--ch-bg-soft:      #f1ebde;       /* fondo alterno stone */
	--ch-text:         #16203a;       /* texto principal — navy oscuro, NO negro puro */
	--ch-muted:        #6b6e78;       /* texto secundario */
	--ch-line:         #e3dccf;       /* hairlines */

	/* Acento cálido — complementario del azul */
	--ch-warm:         #c87a3e;       /* terracota */
	--ch-warm-hover:   #ad6630;

	/* Superficies oscuras (sustituyen al verde gres) */
	--ch-dark:         #0d1a33;       /* navy casi negro, hereda del brand */
	--ch-dark-soft:    #18264a;

	/* Compatibilidad con clases antiguas que usaban --ch-accent.
	   Fondos oscuros → usar el ink, no el azul brillante (demasiado vibrante de gran formato). */
	--ch-accent:       var(--ch-dark);
	--ch-accent-soft:  var(--ch-dark-soft);

	/* Componentes */
	--ch-radius:       4px;
	--ch-max:          1280px;
}

/* Body-level: aplica a las 3 vistas (landing SEO, portada, contacto).
   Bajamos especificidad a .clase (sin body.clase) para que las secciones oscuras
   que vienen DESPUÉS en el archivo puedan ganarles via source order. */
.seo-landing,
.ch-portada,
.ch-contacto {
	background: var(--ch-bg);
	color: var(--ch-text);
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 400;
	line-height: 1.55;
}

.seo-landing h1, .seo-landing h2, .seo-landing h3,
.ch-portada h1, .ch-portada h2, .ch-portada h3,
.ch-contacto h1, .ch-contacto h2, .ch-contacto h3 {
	font-family: 'Forum', 'Times New Roman', serif;
	letter-spacing: .01em;
	color: var(--ch-text);
}

.ch-eyebrow {
	display: inline-block;
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.25);
	padding: .35rem .85rem;
	border-radius: 100px;
	margin-bottom: 1.25rem;
}

.ch-h1 {
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	line-height: 1.05;
	margin: 0 0 1.25rem;
	color: #fff;
	max-width: 22ch;
}

.ch-h2 {
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}

/* ---- HERO ---------------------------------------------------------------- */
.ch-hero {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	min-height: 78vh;
	display: flex;
	align-items: flex-end;
	padding: 6rem 0 4rem;
	margin-top: -1px;
}
.ch-hero__inner {
	max-width: 760px;
}
.ch-subtitle {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	color: rgba(255,255,255,.92);
	max-width: 55ch;
	margin: 0 0 2rem;
}
.ch-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

/* ---- BOTONES ------------------------------------------------------------- */
.ch-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 1rem 1.75rem;
	border-radius: var(--ch-radius);
	font-weight: 500;
	font-size: .95rem;
	text-decoration: none;
	transition: transform .15s ease, background .2s ease, color .2s ease;
	border: 1px solid transparent;
	letter-spacing: .02em;
}
.ch-btn--primary {
	background: var(--ch-brand);
	color: #fff;
}
.ch-btn--primary:hover {
	background: var(--ch-brand-hover);
	color: #fff;
	transform: translateY(-1px);
}
.ch-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.4);
}
.ch-btn--ghost:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
}

/* ---- PROOF --------------------------------------------------------------- */
.ch-proof {
	background: var(--ch-accent);
	color: #fff;
	padding: 2.25rem 0;
}
.ch-proof strong {
	display: block;
	font-family: 'Forum', serif;
	font-size: 1.55rem;
	color: #fff;
	margin-bottom: .15rem;
}
.ch-proof span {
	display: block;
	font-size: .85rem;
	color: rgba(255,255,255,.78);
	letter-spacing: .04em;
}

/* ---- SECCIONES generales ------------------------------------------------- */
.ch-intro,
.ch-galeria,
.ch-colecciones,
.ch-proceso,
.ch-faqs,
.ch-seo-text,
.ch-final-cta {
	padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.ch-intro p,
.ch-seo-text p {
	font-size: 1.08rem;
	color: var(--ch-text);
	margin: 0 0 1.1rem;
}
.ch-intro p strong,
.ch-seo-text p strong {
	color: var(--ch-accent);
}

.ch-section-head {
	margin-bottom: 2.5rem;
	max-width: 60ch;
}
.ch-section-head p {
	color: var(--ch-muted);
	font-size: 1.05rem;
	margin: 0;
}

/* ---- GALERÍA ------------------------------------------------------------- */
.ch-galeria { background: var(--ch-bg-soft); }
.ch-card {
	margin: 0;
	background: #fff;
	border-radius: var(--ch-radius);
	overflow: hidden;
	box-shadow: 0 1px 0 var(--ch-line);
	transition: transform .25s ease, box-shadow .25s ease;
}
.ch-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px -12px rgba(0,0,0,.25);
}
.ch-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	background: #fff;
}
.ch-card figcaption {
	padding: .9rem 1rem;
	font-size: .85rem;
	color: var(--ch-muted);
	line-height: 1.35;
	border-top: 1px solid var(--ch-line);
}

/* ---- COLECCIONES -------------------------------------------------------- */
.ch-colecciones__row { margin-top: 0; }
.ch-coleccion {
	display: block;
	background: #fff;
	border-radius: var(--ch-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--ch-text);
	border: 1px solid var(--ch-line);
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}
.ch-coleccion:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px -12px rgba(0,0,0,.18);
}
.ch-coleccion__img {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: var(--ch-bg-soft);
}
.ch-coleccion__body { padding: 1.5rem 1.5rem 1.75rem; }
.ch-coleccion__body h3 {
	font-size: 1.5rem;
	margin: 0 0 .5rem;
}
.ch-coleccion__body p {
	font-size: .95rem;
	color: var(--ch-muted);
	margin: 0 0 1rem;
}
.ch-link {
	font-size: .85rem;
	letter-spacing: .04em;
	color: var(--ch-warm);
	font-weight: 500;
}

/* ---- PROCESO ------------------------------------------------------------ */
.ch-proceso { background: var(--ch-bg-soft); }
.ch-steps {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ch-steps li { position: relative; }
.ch-step-num {
	display: inline-block;
	font-family: 'Forum', serif;
	font-size: 2.2rem;
	color: var(--ch-brand);
	line-height: 1;
	margin-bottom: .75rem;
}
.ch-steps h3 {
	font-size: 1.35rem;
	margin: 0 0 .5rem;
}
.ch-steps p {
	color: var(--ch-muted);
	font-size: .95rem;
	margin: 0;
}

/* ---- CTA BANNER --------------------------------------------------------- */
.ch-cta-banner {
	background: var(--ch-accent);
	color: #fff;
	text-align: center;
	padding: clamp(3.5rem, 6vw, 5rem) 0;
}
.ch-cta-banner h2 { color: #fff; }
.ch-cta-banner p {
	color: rgba(255,255,255,.85);
	margin: 0 0 2rem;
	font-size: 1.1rem;
}

/* ---- FAQS --------------------------------------------------------------- */
.ch-accordion { list-style: none; padding: 0; margin: 0; }
.ch-accordion > li {
	border-bottom: 1px solid var(--ch-line);
	padding: .25rem 0;
}
.ch-accordion .uk-accordion-title {
	font-family: 'Forum', serif;
	font-size: 1.25rem;
	color: var(--ch-text);
	padding: 1.1rem 0;
}
.ch-accordion .uk-accordion-title::before {
	color: var(--ch-brand);
}
.ch-accordion .uk-accordion-content {
	color: var(--ch-muted);
	margin: 0 0 1.25rem;
}
.ch-accordion .uk-accordion-content strong {
	color: var(--ch-text);
}

/* ---- SEO TEXT ----------------------------------------------------------- */
.ch-seo-text {
	background: var(--ch-bg);
	border-top: 1px solid var(--ch-line);
}

/* ---- SEO PROVINCIAS grid (interlinking local) -------------------------- */
.ch-seo-provincias {
	background: var(--ch-bg-soft, #f3ece1);
	padding: clamp(3rem, 5vw, 4.5rem) 0;
	border-top: 1px solid var(--ch-line, #e3dccf);
}
.ch-seo-provincias [uk-grid] {
	margin-top: 0;
	row-gap: .25rem;
}
.ch-seo-provincias h3,
.ch-seo-provincias .uk-h5 {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 400 !important;
	font-size: .95rem !important;
	line-height: 1.4 !important;
	color: var(--ch-text, #1c1b1a);
	letter-spacing: 0 !important;
	margin: 0 !important;
	padding: .65rem 0;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.ch-seo-provincias a {
	text-decoration: none;
	display: block;
}
.ch-seo-provincias a:hover h3,
.ch-seo-provincias a:hover .uk-h5 {
	color: var(--ch-warm, #c87a3e);
	border-bottom-color: var(--ch-warm, #c87a3e);
}

/* ---- FINAL CTA --------------------------------------------------------- */
.ch-final-cta {
	background: var(--ch-accent);
	color: #fff;
}
.ch-final-cta__head {
	text-align: center;
	margin-bottom: 2.25rem;
}
.ch-final-cta__head h2 { color: #fff; }
.ch-final-cta__head p { color: rgba(255,255,255,.85); }
.ch-final-cta h2 { color: #fff; }
.ch-final-cta p { color: rgba(255,255,255,.85); }

.ch-eyebrow--light {
	color: rgba(255,255,255,.9);
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.25);
}

/* ---- WhatsApp big CTA --------------------------------------------------- */
.ch-whatsapp-cta { padding: clamp(4rem, 7vw, 6rem) 0; }
.ch-whatsapp-cta p { margin-bottom: 2rem; }

.ch-whatsapp-btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 2rem;
	background: #25d366;
	color: #fff !important;
	border-radius: 999px;
	text-decoration: none;
	font-family: 'Inter', system-ui, sans-serif;
	transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
	box-shadow: 0 6px 18px -6px rgba(37,211,102,.55);
}
.ch-whatsapp-btn:hover {
	background: #1ebe57;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -6px rgba(37,211,102,.7);
}
.ch-whatsapp-btn [uk-icon] { color: #fff; flex: 0 0 auto; }
.ch-whatsapp-btn__label {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
	text-align: left;
}
.ch-whatsapp-btn__label small {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
}
.ch-whatsapp-btn__label strong {
	font-family: 'Forum', serif;
	font-size: 1.5rem;
	letter-spacing: .02em;
	font-weight: 400;
}

/* CTAs en hero / banner — añadimos icono WhatsApp inline */
.ch-btn [uk-icon] {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.ch-whatsapp-btn { width: 100%; justify-content: center; }
	.ch-whatsapp-btn__label { align-items: center; text-align: center; }
}


/* =============================================================================
 *  CONTACTO — Cerámica Horeca
 * ========================================================================== */

.ch-contacto-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: flex-end;
	color: #fff;
	overflow: hidden;
	padding: 6rem 0 4rem;
}
.ch-contacto-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.ch-contacto-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ch-contacto-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,20,20,.4) 0%, rgba(20,20,20,.75) 100%);
}
.ch-contacto-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}
.ch-contacto-hero__title {
	color: #fff;
	font-size: clamp(2.6rem, 5.5vw, 4.6rem);
	line-height: 1.04;
	margin: 0 0 1.25rem;
}
.ch-contacto-hero__sub {
	color: rgba(255,255,255,.92);
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	max-width: 56ch;
	margin: 0;
}

/* ---- Main: dos columnas con tarjeta WhatsApp ----------------------------- */
.ch-contacto-main {
	padding: clamp(4rem, 7vw, 6rem) 0;
	background: var(--ch-bg, #fbf8f3);
}
.ch-contacto-grid { row-gap: 3rem; }
.ch-contacto-main h2 { margin-top: .75rem; }
.ch-contacto-main p {
	color: var(--ch-muted, #6b655d);
	font-size: 1.05rem;
	margin: 0 0 1.1rem;
}

.ch-contacto-puntos {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
}
.ch-contacto-puntos li {
	padding: .85rem 0;
	border-bottom: 1px solid var(--ch-line, #e3dccf);
	color: var(--ch-muted, #6b655d);
	font-size: .95rem;
}
.ch-contacto-puntos li:last-child { border-bottom: 0; }
.ch-contacto-puntos li strong { color: var(--ch-text, #1c1b1a); }

.ch-contacto-card-wrap { display: flex; justify-content: center; }
.ch-contacto-card {
	background: #fff;
	border: 1px solid var(--ch-line, #e3dccf);
	border-radius: var(--ch-radius, 4px);
	padding: 3rem 2.5rem;
	max-width: 480px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 50px -25px rgba(0,0,0,.18);
}
.ch-contacto-card__icon {
	width: 88px;
	height: 88px;
	margin: 0 auto 1.5rem;
	background: rgba(37,211,102,.12);
	color: #25d366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ch-contacto-card h3 {
	font-family: 'Forum', serif;
	font-size: 1.7rem;
	margin: 0 0 .65rem;
	color: var(--ch-text, #1c1b1a);
}
.ch-contacto-card p {
	color: var(--ch-muted, #6b655d);
	font-size: 1rem;
	margin: 0 0 1.75rem;
}
.ch-contacto-card .ch-whatsapp-btn--big {
	padding: 1.25rem 2rem;
	width: 100%;
	justify-content: center;
}
.ch-contacto-card__hint {
	font-size: .82rem !important;
	color: var(--ch-muted, #6b655d) !important;
	margin: 1.5rem 0 0 !important;
	line-height: 1.5;
}

/* ---- Info blocks (3 columnas) ------------------------------------------- */
.ch-contacto-info {
	padding: clamp(4rem, 7vw, 6rem) 0;
	background: var(--ch-bg-soft, #f3ece1);
	border-top: 1px solid var(--ch-line, #e3dccf);
}
.ch-info-block {
	padding-right: 1rem;
}
.ch-info-block__num {
	display: block;
	font-family: 'Forum', serif;
	font-size: 2.2rem;
	color: var(--ch-brand, #0E4FAD);
	line-height: 1;
	margin-bottom: .9rem;
}
.ch-info-block h3 {
	font-size: 1.4rem;
	margin: 0 0 .65rem;
}
.ch-info-block p {
	color: var(--ch-muted, #6b655d);
	font-size: 1rem;
	margin: 0;
	line-height: 1.55;
}
.ch-info-block p strong { color: var(--ch-text, #1c1b1a); }

/* En la página de contacto la última sección no necesita extra padding */
.ch-contacto .ch-final-cta { padding-top: clamp(4rem, 7vw, 6rem); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
	.ch-hero { min-height: 70vh; padding: 4.5rem 0 3rem; }
	.ch-btn { width: 100%; justify-content: center; }
	.ch-cta-row { flex-direction: column; }
}


/* =============================================================================
 *  OFFCANVAS MENU — Cerámica Horeca
 * ========================================================================== */

.ch-offcanvas {
	background: var(--ch-bg, #fbf8f3);
	width: min(100vw, 720px);
	padding: 2rem 1.5rem;
}
.ch-offcanvas .uk-offcanvas-close { color: var(--ch-accent, #2f3e2f); }

.ch-menu,
.ch-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ch-menu > li {
	border-bottom: 1px solid rgba(0,0,0,.07);
}

.ch-menu > li > a {
	display: block;
	padding: 1rem 0;
	font-family: 'Forum', 'Times New Roman', serif;
	font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
	color: var(--ch-text, #1c1b1a) !important;
	line-height: 1.15;
	text-decoration: none;
	letter-spacing: .01em;
}

.ch-menu > li.uk-parent > a::after {
	content: '+';
	float: right;
	font-family: 'Inter', sans-serif;
	color: var(--ch-warm, #c87a3e);
	font-size: 1.5rem;
	line-height: 1.6;
	transition: transform .2s ease;
}
.ch-menu > li.uk-open > a::after { content: '−'; }

.ch-menu > li > a:hover { color: var(--ch-warm, #c87a3e) !important; }

.ch-menu .uk-nav-sub {
	padding: 0 0 .75rem;
	display: none;
}
.ch-menu .uk-open > .uk-nav-sub { display: block; }

.ch-menu .uk-nav-sub li a {
	display: block;
	padding: .45rem 0;
	font-family: 'Inter', sans-serif;
	font-size: 1rem !important;
	color: var(--ch-muted, #6b655d) !important;
	text-decoration: none;
	letter-spacing: 0;
	font-weight: 400;
}
.ch-menu .uk-nav-sub li a:hover {
	color: var(--ch-warm, #c87a3e) !important;
}

.ch-menu .uk-nav-sub li a.ch-sub-all {
	color: var(--ch-warm, #c87a3e) !important;
	font-weight: 500;
	letter-spacing: .02em;
}

/* Override agresivo del CSS antiguo del offcanvas (.uk-offcanvas-bar .menu-large) */
.uk-offcanvas-bar .ch-menu li a {
	font-size: inherit !important;
}


/* =============================================================================
 *  FOOTER — Cerámica Horeca
 * ========================================================================== */

.ch-footer {
	background: var(--ch-accent, #2f3e2f);
	color: rgba(255,255,255,.78);
	padding: 4rem 0 2rem;
	margin-top: 0;
}

.ch-footer__top { margin-bottom: 2.5rem; }

.ch-footer__brand img {
	max-width: 180px;
	margin-bottom: 1.25rem;
	display: block;
	filter: brightness(0) invert(1);
}

.ch-footer__claim {
	font-size: .95rem;
	color: rgba(255,255,255,.7);
	max-width: 32ch;
	margin: 0;
}

.ch-footer h4 {
	font-family: 'Forum', serif;
	font-size: 1.15rem;
	color: #fff;
	margin: 0 0 1rem;
	letter-spacing: .04em;
}

.ch-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ch-footer ul li { margin-bottom: .4rem; }

.ch-footer ul a {
	color: rgba(255,255,255,.78);
	font-size: .9rem;
	text-decoration: none;
	transition: color .15s ease;
}
.ch-footer ul a:hover { color: var(--ch-warm, #c87a3e); }

.ch-footer__contact { margin-bottom: 1.5rem; }

.ch-footer__cta {
	margin-top: .5rem;
	display: inline-flex;
}

.ch-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.15);
	padding-top: 1.5rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem;
}
.ch-footer__bottom small {
	color: rgba(255,255,255,.5);
	font-size: .78rem;
}
.ch-footer__bottom small a {
	color: rgba(255,255,255,.5);
	text-decoration: underline;
}
.ch-footer__bottom small a:hover { color: var(--ch-warm, #c87a3e); }


/* =============================================================================
 *  PORTADA — Cerámica Horeca
 * ========================================================================== */

/* Reglas redundantes — ya cubiertas arriba en el bloque común (.seo-landing/.ch-portada/.ch-contacto)
   Se mantienen como fallback con baja especificidad. */
.ch-portada { background: var(--ch-bg); color: var(--ch-text); }

/* ---- HERO --------------------------------------------------------------- */
.ch-home-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
	color: #fff;
	overflow: hidden;
	padding: 6rem 0 4rem;
}
.ch-home-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.ch-home-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ch-home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,20,20,.25) 0%, rgba(20,20,20,.65) 100%);
}
.ch-home-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 820px;
}
.ch-home-hero__title {
	color: #fff;
	font-size: clamp(2.8rem, 6vw, 5.2rem);
	line-height: 1.02;
	margin: 0 0 1.5rem;
}
.ch-home-hero__sub {
	color: rgba(255,255,255,.92);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	max-width: 56ch;
	margin: 0 0 2rem;
}

/* eyebrow oscuro para secciones con fondo claro */
.ch-eyebrow--dark {
	color: var(--ch-brand, #0E4FAD);
	background: var(--ch-brand-soft, #e7eef9);
	border-color: rgba(14,79,173,.22);
}

/* ---- Promise (3 columnas) ---------------------------------------------- */
.ch-home-promise {
	padding: clamp(4rem, 7vw, 6rem) 0;
	background: var(--ch-bg, #fbf8f3);
	border-bottom: 1px solid var(--ch-line, #e3dccf);
}
.ch-promise {
	padding-right: 1rem;
}
.ch-promise__num {
	display: block;
	font-family: 'Forum', serif;
	font-size: 2.2rem;
	color: var(--ch-brand, #0E4FAD);
	line-height: 1;
	margin-bottom: 1rem;
}
.ch-promise h3 {
	font-size: 1.5rem;
	margin: 0 0 .75rem;
}
.ch-promise p {
	color: var(--ch-muted, #6b655d);
	font-size: 1rem;
	margin: 0;
	line-height: 1.55;
}

/* ---- Section heads centradas ------------------------------------------- */
.ch-section-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.ch-section-head--center p { margin-left: auto; margin-right: auto; }

/* ---- Sectores grid ------------------------------------------------------ */
.ch-home-sectores {
	padding: clamp(4rem, 7vw, 6rem) 0;
	background: var(--ch-bg-soft, #f3ece1);
}
.ch-sectores-grid { margin-top: 0; }
.ch-sector {
	display: block;
	text-decoration: none;
	color: var(--ch-text, #1c1b1a);
	background: #fff;
	border-radius: var(--ch-radius, 4px);
	overflow: hidden;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
	border: 1px solid var(--ch-line, #e3dccf);
}
.ch-sector:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px -12px rgba(0,0,0,.2);
	color: var(--ch-text, #1c1b1a);
}
.ch-sector__img {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: var(--ch-bg-soft, #f3ece1);
}
.ch-sector h3 {
	font-size: 1.4rem;
	margin: 1.25rem 1.25rem .5rem;
}
.ch-sector p {
	color: var(--ch-muted, #6b655d);
	font-size: .95rem;
	margin: 0 1.25rem 1rem;
}
.ch-sector .ch-link {
	margin: 0 1.25rem 1.5rem;
	display: inline-block;
}

/* ---- Colecciones (portada) --------------------------------------------- */
.ch-home-colecciones {
	padding: clamp(4rem, 7vw, 6rem) 0;
	background: var(--ch-bg, #fbf8f3);
}

/* ---- Proceso (portada — fondo claro) ----------------------------------- */
.ch-home-proceso {
	padding: clamp(4rem, 7vw, 6rem) 0;
	background: var(--ch-accent, #2f3e2f);
	color: #fff;
}
.ch-home-proceso .ch-eyebrow--dark {
	color: rgba(255,255,255,.9);
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.25);
}
.ch-home-proceso h2 { color: #fff; }
/* En proceso de portada (fondo oscuro navy) el step-num pasa a terracota para
   acentuar contra el azul de marca de los CTAs. */
.ch-home-proceso .ch-step-num { color: var(--ch-warm, #c87a3e); }
.ch-home-proceso .ch-steps h3 { color: #fff; }
.ch-home-proceso .ch-steps p { color: rgba(255,255,255,.78); }

/* ---- Destacados (portada) ---------------------------------------------- */
.ch-home-destacados {
	padding: clamp(4rem, 7vw, 6rem) 0;
	background: var(--ch-bg-soft, #f3ece1);
}
.ch-btn--dark {
	color: var(--ch-text, #1c1b1a);
	border-color: rgba(0,0,0,.25);
}
.ch-btn--dark:hover {
	background: rgba(0,0,0,.05);
	color: var(--ch-text, #1c1b1a);
}


/* =============================================================================
 *  CONTRAST GUARD — Secciones con fondo oscuro
 *  ---------------------------------------------------------------------------
 *  Bloque final con la máxima especificidad de "scope dark". Evita texto
 *  oscuro heredado en secciones que viven sobre fondo oscuro, sin importar
 *  qué reglas declaradas antes intenten ganar.
 *  Las secciones que entran aquí son:
 *    .ch-hero, .ch-home-hero, .ch-contacto-hero          (overlays oscuros)
 *    .ch-proof, .ch-cta-banner, .ch-home-proceso         (fondos navy)
 *    .ch-final-cta (.ch-whatsapp-cta), .ch-footer        (fondos navy)
 * ========================================================================== */

.ch-hero, .ch-home-hero, .ch-contacto-hero,
.ch-proof, .ch-cta-banner, .ch-home-proceso,
.ch-final-cta, .ch-whatsapp-cta, .ch-footer {
	color: rgba(255,255,255,.92);
}

.ch-hero h1, .ch-hero h2, .ch-hero h3, .ch-hero p,
.ch-home-hero h1, .ch-home-hero h2, .ch-home-hero h3, .ch-home-hero p,
.ch-contacto-hero h1, .ch-contacto-hero h2, .ch-contacto-hero h3, .ch-contacto-hero p,
.ch-proof h2, .ch-proof h3, .ch-proof p, .ch-proof strong, .ch-proof span,
.ch-cta-banner h1, .ch-cta-banner h2, .ch-cta-banner h3, .ch-cta-banner p,
.ch-home-proceso h1, .ch-home-proceso h2, .ch-home-proceso h3, .ch-home-proceso p,
.ch-final-cta h1, .ch-final-cta h2, .ch-final-cta h3, .ch-final-cta p,
.ch-whatsapp-cta h1, .ch-whatsapp-cta h2, .ch-whatsapp-cta h3, .ch-whatsapp-cta p,
.ch-footer h1, .ch-footer h2, .ch-footer h3, .ch-footer h4, .ch-footer p {
	color: #fff;
}

/* Párrafos descriptivos sobre fondo oscuro: blanco con algo de transparencia */
.ch-hero p, .ch-hero .ch-subtitle,
.ch-home-hero p, .ch-home-hero__sub,
.ch-contacto-hero p, .ch-contacto-hero__sub,
.ch-cta-banner p,
.ch-home-proceso p,
.ch-final-cta p,
.ch-whatsapp-cta p,
.ch-footer p, .ch-footer ul a, .ch-footer ul li {
	color: rgba(255,255,255,.85);
}

/* Strong dentro de secciones oscuras: blanco pleno para destacar */
.ch-hero strong, .ch-home-hero strong, .ch-contacto-hero strong,
.ch-cta-banner strong, .ch-home-proceso strong,
.ch-final-cta strong, .ch-whatsapp-cta strong, .ch-footer strong {
	color: #fff;
}

/* Pasos del proceso en portada (fondo oscuro): título y descripción legibles */
.ch-home-proceso .ch-steps h3 { color: #fff; }
.ch-home-proceso .ch-steps p { color: rgba(255,255,255,.78); }

/* Botón ghost en hero: borde y texto blancos */
.ch-hero .ch-btn--ghost,
.ch-home-hero .ch-btn--ghost,
.ch-contacto-hero .ch-btn--ghost {
	color: #fff;
	border-color: rgba(255,255,255,.45);
	background: transparent;
}
.ch-hero .ch-btn--ghost:hover,
.ch-home-hero .ch-btn--ghost:hover,
.ch-contacto-hero .ch-btn--ghost:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
}

/* Eyebrow blanco sobre secciones oscuras (.ch-eyebrow base + .ch-eyebrow--light) */
.ch-hero .ch-eyebrow,
.ch-home-hero .ch-eyebrow,
.ch-contacto-hero .ch-eyebrow,
.ch-cta-banner .ch-eyebrow,
.ch-home-proceso .ch-eyebrow,
.ch-final-cta .ch-eyebrow,
.ch-whatsapp-cta .ch-eyebrow,
.ch-footer .ch-eyebrow,
.ch-eyebrow--light {
	color: rgba(255,255,255,.9);
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.25);
}

/* Override del eyebrow--dark cuando aparece dentro de secciones oscuras
   (la portada usa `eyebrow eyebrow--dark` también en el proceso oscuro) */
.ch-home-proceso .ch-eyebrow--dark,
.ch-cta-banner .ch-eyebrow--dark,
.ch-final-cta .ch-eyebrow--dark,
.ch-whatsapp-cta .ch-eyebrow--dark,
.ch-footer .ch-eyebrow--dark {
	color: rgba(255,255,255,.9);
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.25);
}

/* En .ch-proof los datos van centrados y son tipográficos */
.ch-proof strong { color: #fff; }
.ch-proof span { color: rgba(255,255,255,.78); }


/* =============================================================================
 *  TYPOGRAPHIC TUNING — strong/link emphasis sobre fondos claros
 *  El énfasis (strong) en bloques de texto largo recibe el color de marca para
 *  que se relacione visualmente con los CTAs.
 * ========================================================================== */

.ch-intro p strong,
.ch-seo-text p strong,
.ch-contacto-main strong,
.ch-info-block p strong {
	color: var(--ch-brand);
}

::selection {
	background-color: var(--ch-brand);
	color: #fff;
}