/*
 * layout.css — Contenedor, cabecera, navegacion y pie.
 *
 * Cabecera con diseño. El pie sigue siendo andamiaje: no recibe diseño
 * en esta fase.
 */

.dcn-contenedor {
	width: 100%;
	max-width: var(--dcn-ancho-contenedor);
	margin-inline: auto;
	/* Margen lateral fluido: 1rem a 320px, 2rem en pantallas grandes. */
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
}

/* Cabecera */

.dcn-cabecera {
	border-bottom: 1px solid var(--dcn-color-borde);
	background: var(--dcn-color-fondo);
}

.dcn-cabecera__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dcn-espacio-s);
	/* Altura contenida: la cabecera no debe pesar sobre el contenido. */
	padding-block: clamp(0.75rem, 0.6rem + 0.5vw, 1.125rem);
}

/*
 * Marca. El logotipo oficial de NICE esta cargado en Apariencia >
 * Personalizar > Identidad del sitio: WordPress emite .custom-logo y el nombre
 * en texto queda como reserva para el caso de que se retire. El tema NO dibuja
 * logotipos (Maestro §35, §38.15).
 */

.dcn-marca {
	margin: 0;
	display: flex;
	align-items: center;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.dcn-marca .custom-logo-link {
	display: inline-flex;
}

/* Presencia suficiente sin llegar a ocupar media cabecera: de 52px a 66px de
   alto. El archivo del logotipo no se toca: solo se escala por altura,
   conservando la proporcion original con width:auto. La composicion oficial es
   horizontal y a 42px se leia pequeña.

   El tramo fluido conserva la misma ventana que antes —crece entre ~500px y
   ~1244px de viewport— y solo se desplazan sus extremos. */
.dcn-marca .custom-logo {
	height: clamp(3.25rem, 2.65rem + 1.9vw, 4.125rem);
	width: auto;
	max-width: 100%;
}

.dcn-marca__enlace {
	text-decoration: none;
	color: var(--dcn-color-texto);
	transition: color var(--dcn-transicion);
}

.dcn-marca__enlace:hover {
	color: var(--dcn-verde);
}

/* Boton del menu — visible solo en movil (Maestro §14) */

.dcn-nav-boton {
	display: inline-flex;
	align-items: center;
	gap: var(--dcn-espacio-xs);
	padding: var(--dcn-espacio-xs) var(--dcn-espacio-s);
	border: 1px solid var(--dcn-color-borde-interactivo);
	border-radius: var(--dcn-radio-m);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--dcn-transicion), border-color var(--dcn-transicion);
}

/* El verde es el unico cambio de estado, pero el borde y la forma ya
   identifican el boton: no se depende del color (Maestro §26). */
.dcn-nav-boton:hover {
	color: var(--dcn-verde);
	border-color: var(--dcn-verde);
}

.dcn-nav-boton__icono {
	width: 1.125rem;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.dcn-nav {
	display: none;
	width: 100%;
}

.dcn-nav.esta-abierto {
	display: block;
}

.dcn-nav__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dcn-espacio-xs);
}

.dcn-nav__lista a {
	display: block;
	padding: var(--dcn-espacio-xs) 0;
	color: var(--dcn-color-texto);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--dcn-transicion);
}

.dcn-nav__lista a:hover,
.dcn-nav__lista a:focus-visible {
	color: var(--dcn-verde);
	text-decoration: underline;
}

/* A partir de tablet el menu es siempre visible y el boton desaparece */
@media (min-width: 48em) {

	.dcn-nav-boton {
		display: none;
	}

	.dcn-nav {
		display: block;
		width: auto;
	}

	.dcn-nav__lista {
		flex-direction: row;
		gap: var(--dcn-espacio-m);
	}
}

/*
 * Aviso de desarrollo bajo la cabecera.
 * Es andamiaje: no debe quedar ninguno en la web publicada.
 */

.dcn-aviso-desarrollo {
	padding-block: var(--dcn-espacio-s);
}

/* El marcador es el unico hijo del aviso: su margen inferior heredado de la
   regla global de <p> solo añadia hueco muerto bajo la caja. */
.dcn-aviso-desarrollo .dcn-pendiente {
	margin-bottom: 0;
}

/*
 * Pie — cierre institucional (Maestro §12).
 *
 * Deliberadamente mas discreto que el resto de la pagina: fondo neutro calido,
 * cuerpos pequeños, sin tarjetas, sin sombras y sin repetir el CTA comercial.
 * Cierra la secuencia CTA verde -> Contacto blanco -> pie neutro.
 */

/*
 * PIE EN VERDE PROFUNDO — 19/09/2026.
 *
 * Recupera el cierre solido de la referencia original. El pie crema anterior se
 * difuminaba con el resto de la pagina y la landing terminaba sin rematar.
 *
 * Ya no hace falta filete superior: el cambio de color separa mejor que una linea.
 */
.dcn-pie {
	background: var(--dcn-verde-profundo);
	color: var(--dcn-blanco);
}

/*
 * El contorno de foco global es azul y sobre verde profundo daria 1,4:1. Aqui se
 * pinta en blanco, igual que en el CTA comercial y en la franja de beneficios.
 */
.dcn-pie :focus-visible {
	outline-color: var(--dcn-blanco);
}

.dcn-pie__interior {
	display: grid;
	gap: var(--dcn-espacio-l);
	padding-block: var(--dcn-espacio-l);
}

/*
 * Cuatro columnas desde 64em —marca, secciones, contacto y legal— como en la
 * referencia. A 48em se queda en dos: cuatro columnas a 768px dejarian los rotulos
 * partidos. Por debajo, una sola.
 *
 * La primera columna va algo mas ancha: lleva la marca y el lema.
 */
@media (min-width: 48em) {

	.dcn-pie__interior {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {

	.dcn-pie__interior {
		grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
	}
}

/*
 * Placa del logotipo oficial. Crema muy discreta, del mismo tono que el hero, con el
 * relleno justo para que el logotipo respire. Redondeo suave y SIN sombra ni borde:
 * debe leerse como el fondo sobre el que se apoya la marca, no como una tarjeta.
 *
 * Existe por una razon concreta: el logotipo lleva «Dulces de Coco» y el simbolo ®
 * en tono oscuro, que sobre el verde profundo del pie desaparecerian. La alternativa
 * —aclarar el logotipo— queda descartada: alterarlo esta prohibido (Maestro §38.15).
 *
 * width:fit-content para que la placa mida lo que mide el logotipo y no se estire a
 * la columna entera.
 */
.dcn-pie__logo {
	width: fit-content;
	margin-bottom: var(--dcn-espacio-s);
	padding: 0.625rem 0.875rem;
	border-radius: var(--dcn-radio-m);
	background: var(--dcn-color-fondo-alt);
}

.dcn-pie__logo .custom-logo {
	display: block;
	/* Algo menor que en la cabecera: aqui acompaña, no encabeza. */
	height: clamp(2.75rem, 2.4rem + 1.1vw, 3.25rem);
	width: auto;
	max-width: 100%;
}

/* Serif, como los titulares: es el nombre de la marca cerrando la pagina. */
.dcn-pie__marca {
	margin-bottom: var(--dcn-espacio-xs);
	color: var(--dcn-blanco);
	font-family: var(--dcn-fuente-titulo);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* 8,9:1 sobre el verde profundo. */
.dcn-pie__lema {
	max-width: 22rem;
	margin-bottom: 0;
	color: var(--dcn-verde-claro-texto);
	font-size: 0.9375rem;
}

/*
 * Rotulo de bloque, del mismo cuerpo que las etiquetas del resto de la pagina.
 * Es un <p>, no un encabezado: la interlinea se fija a mano para que el rotulo
 * ocupe exactamente lo mismo que cuando era <h2> y nada se mueva.
 */
/*
 * Rotulos de columna en verde claro sobre el verde profundo: 6,5:1, por encima del
 * minimo AA. El caramelo no funciona sobre fondo oscuro y se queda para las
 * superficies claras.
 *
 * Esto NO alcanza al bloque de informacion legal: los cuatro nombres siguen siendo
 * texto plano, sin enlace y sin apariencia de enlace, mientras el pendiente 2 siga
 * abierto. Solo cambia de color el rotulo de la columna.
 */
.dcn-pie__titulo {
	margin-bottom: var(--dcn-espacio-s);
	line-height: 1.15;
	color: var(--dcn-verde-claro-rotulo);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.dcn-pie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dcn-espacio-xs);
	font-size: 0.9375rem;
}

/*
 * ENLACES REALES del pie. Blanco puro —12,3:1— y SUBRAYADO PERMANENTE y visible.
 *
 * El subrayado no es decorativo: es la señal que distingue un enlace de un texto
 * inerte sin depender del color (Maestro §26). Los cuatro nombres legales, que hoy
 * NO son enlaces, no lo llevan. Esa es toda la diferencia, y funciona igual para
 * quien no distinga colores.
 */
.dcn-pie__lista a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--dcn-blanco);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.55);
	text-underline-offset: 0.2em;
	/* Un correo largo nunca debe desbordar en movil. */
	overflow-wrap: break-word;
	transition: text-decoration-color var(--dcn-transicion);
}

/* El hover refuerza el subrayado en lugar de cambiar el color: sigue siendo la
   forma, no el tono, lo que comunica. */
.dcn-pie__lista a:hover,
.dcn-pie__lista a:focus-visible {
	text-decoration-color: var(--dcn-blanco);
	text-decoration-thickness: 2px;
}

/* Icono de canal. currentColor: acompaña al enlace sin regla propia de color. */
.dcn-pie__icono {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	fill: currentColor;
}

/*
 * Franja de cierre. Un escalon mas oscura y a ancho completo, como en la referencia:
 * remata la pagina sin necesidad de otro filete. Desde el 19/09/2026 contiene solo
 * el copyright: la informacion legal subio a la cuarta columna de la rejilla.
 *
 * Ya no vive dentro de .dcn-pie__interior, asi que no necesita grid-column.
 */
.dcn-pie__cierre {
	background: var(--dcn-verde-profundo-oscuro);
	padding-block: var(--dcn-espacio-s);
	/* El boton flotante de WhatsApp es position:fixed y taparia el final del pie. */
	padding-bottom: calc(var(--dcn-alto-flotante) + var(--dcn-espacio-s));
}

/*
 * Los nombres de las cuatro paginas legales se muestran como texto, no como
 * enlaces: no existen todavia y un href="#" seria un destino falso.
 */
/*
 * LEGALES INERTES sobre fondo oscuro.
 *
 * Los cuatro nombres son TEXTO, no enlaces, y deben leerse como tal mientras el
 * pendiente 2 siga abierto. Tres decisiones deliberadas:
 *
 *   - SIN subrayado. Es la señal que los separa de los enlaces reales de arriba,
 *     que lo llevan permanente. No depende del color (Maestro §26).
 *   - SIN hover y SIN cursor de puntero: nada invita a pulsarlos.
 *   - Verde claro a 8,9:1 sobre el fondo: perfectamente legibles, y secundarios
 *     respecto al blanco puro de los enlaces.
 *
 * En columna y no en fila: son cuatro nombres largos y en linea se partian mal.
 *
 * Cuando el pendiente 2 se cierre, dcn_enlace_legal() empezara a devolver <a> y la
 * regla de abajo les dara automaticamente el mismo trato que al resto de enlaces.
 */
.dcn-pie__legal-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dcn-espacio-xs);
	color: var(--dcn-verde-claro-texto);
	font-size: 0.875rem;
}

/*
 * Si algun dia el pendiente 2 se cierra y los legales pasan a ser enlaces reales,
 * heredan el mismo tratamiento que el resto: blanco y subrayado permanente. No hay
 * que recordar volver aqui a cambiarlo.
 */
.dcn-pie__legal-lista a {
	color: var(--dcn-blanco);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.55);
	text-underline-offset: 0.2em;
}

.dcn-pie__legal-lista a:hover,
.dcn-pie__legal-lista a:focus-visible {
	text-decoration-color: var(--dcn-blanco);
	text-decoration-thickness: 2px;
}

/* Copyright: el año lo pone wp_date() en el marcado, no se escribe a mano. */
.dcn-pie__copyright {
	margin: 0;
	color: var(--dcn-verde-claro-texto);
	font-size: 0.875rem;
}

.dcn-pie__cierre .dcn-pendiente {
	margin-bottom: 0;
	padding: 0.625rem 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
}