/*
 * secciones.css — Hero, botones y andamiaje del resto de secciones (Maestro §12).
 *
 * 19/09/2026 — se completa la capa visual que faltaba. Hasta esta fecha este
 * archivo declaraba que productos, historia, elaboracion, presencia, CTA comercial
 * y contacto SEGUIAN SIENDO ANDAMIAJE, sin diseño final, con filetes separadores
 * provisionales. Esa nota se conserva aqui como registro de lo que habia antes.
 *
 * Ahora las nueve zonas tienen tratamiento cromatico deliberado, siguiendo la
 * direccion «obrador calido» de base.css. El recorrido, y cada paso tiene motivo:
 *
 *   cabecera blanco .... interfaz, no seccion
 *   hero     crema ..... el cambio de temperatura ocurre en el primer pantallazo
 *   productos blanco ... fondo mas limpio posible: manda la fotografia
 *   historia crema ..... pausa narrativa
 *   elaboracion blanco . respiracion; mantiene el latido calido/limpio
 *   presencia verde ten. el verde entra como ambiente y prepara el golpe
 *   CTA      verde NICE  climax cromatico. NO se toca
 *   contacto blanco .... descanso despues del verde saturado
 *   pie      crema ..... cierra con el tono con que abrio la pagina
 */

.dcn-seccion {
	/* Ritmo vertical fluido: 48px en movil, 80px en pantallas grandes.
	   La landing debe mantenerse corta (Maestro §38.26). */
	padding-block: clamp(3rem, 2.25rem + 3.2vw, 5rem);
	border-bottom: 1px solid var(--dcn-color-borde);
}

.dcn-seccion:last-of-type {
	border-bottom: 0;
}

/*
 * Titulos de seccion en serif del sistema. Es el rasgo que mas devuelve el caracter
 * de la referencia original. Solo los titulares: la interfaz sigue en sans.
 */
.dcn-seccion__titulo {
	font-family: var(--dcn-fuente-titulo);
	font-weight: 700;
	/* Algo mas de cuerpo que antes: el serif necesita tamaño para leerse como titular. */
	font-size: clamp(1.625rem, 1.25rem + 1.7vw, 2.25rem);
	letter-spacing: -0.015em;
}

/*
 * Acento de marca dentro de un titular. Solo color: el dato no depende de el y el
 * texto se lee igual sin distinguirlo (Maestro §26). Sobre crema se usa el verde
 * oscuro, porque el verde de marca se queda en 4,4:1 sobre ese fondo.
 */
.dcn-acento {
	color: var(--dcn-verde-oscuro);
}

/*
 * Filete de acento sobre el titulo. Nace del recurso que ya tenia Historia y se
 * generaliza para que las secciones compartan un mismo gesto en lugar de decorarse
 * cada una por su cuenta. Decorativo y vacio: ningun lector de pantalla lo anuncia.
 *
 * Se aplica por seccion, NO en la regla base: el hero usa un H1 con otro
 * tratamiento y el CTA comercial va sobre verde, donde el filete no aporta.
 * Verde en las secciones de producto y marca; caramelo en las narrativas.
 */
.dcn-productos .dcn-seccion__titulo::before,
.dcn-historia .dcn-seccion__titulo::before,
.dcn-elaboracion .dcn-seccion__titulo::before,
.dcn-presencia .dcn-seccion__titulo::before,
.dcn-contacto .dcn-seccion__titulo::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-bottom: var(--dcn-espacio-s);
	background: var(--dcn-verde);
}

/* Narrativas en caramelo: distinguen la pausa editorial del bloque de producto. */
.dcn-historia .dcn-seccion__titulo::before,
.dcn-contacto .dcn-seccion__titulo::before {
	background: var(--dcn-caramelo);
}

/* Hero — unica seccion con diseño en esta fase */

.dcn-hero {
	/*
	 * Padding asimetrico: el hero va inmediatamente debajo de la cabecera y no
	 * necesita el mismo aire arriba que abajo. Arriba enlaza con la cabecera;
	 * abajo separa de la siguiente seccion.
	 */
	padding-top: clamp(1.5rem, 1rem + 2.2vw, 3rem);
	padding-bottom: clamp(3rem, 1.8rem + 5.5vw, 6.5rem);
	/* El fondo calido ya separa de Productos: el filete sobra. */
	border-bottom: 0;
	position: relative;
	background: var(--dcn-color-fondo-alt);
	/* Contiene la mancha de ::before. Sin esto desbordaria en horizontal. */
	overflow: hidden;
}

/*
 * Mancha de ambiente. Es un degradado radial, no una ilustracion: no dibuja hojas,
 * cocos ni ninguna figura (Maestro §35, §38.10). No añade ningun archivo y no entra
 * en el arbol de accesibilidad. Su unico trabajo es que la fotografia del hero se
 * apoye en algo en lugar de flotar sobre un plano liso.
 */
.dcn-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	/* Anclada al area visual —derecha— y contenida por el overflow del padre. */
	inset-block: -20%;
	right: -10%;
	width: min(70%, 46rem);
	background: radial-gradient(
		ellipse at 60% 45%,
		rgba(184, 117, 42, 0.10) 0%,
		rgba(184, 117, 42, 0.05) 45%,
		rgba(184, 117, 42, 0) 72%
	);
}

/*
 * Desde 76em manda la composicion integrada: la mancha sobra y ademas ensuciaria el
 * degradado crema. Se apaga en lugar de borrarla, porque por debajo sigue haciendo
 * su trabajo sobre el fondo liso.
 */
@media (min-width: 76em) {

	.dcn-hero::before {
		display: none;
	}
}

/* El contenido va por encima de la mancha. */
.dcn-hero__interior {
	position: relative;
	z-index: 1;
}

.dcn-hero__interior {
	display: grid;
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	align-items: center;
}

/*
 * TABLET — 48em a 76em: contenido arriba, fotografia panoramica debajo.
 *
 * Hasta el 19/09/2026 este tramo usaba dos columnas, 45% de texto y 55% de area
 * visual. Se retiro despues de mirarlo: la composicion mide 2,33:1 y, metida en una
 * columna de poco mas de la mitad del ancho, volvia a leerse como una fotografia
 * pequeña colocada al lado del texto. Justo la sensacion que el hero integrado de
 * escritorio venia a eliminar.
 *
 * Apilado, la imagen recupera el ancho completo y su caracter de franja editorial.
 * NO se reproduce aqui la superposicion de escritorio: a estos anchos el texto
 * competiria con el producto, que es lo que ya se descarto al subir aquel umbral a
 * 76em. Tablet tiene su propia solucion, y es mas simple.
 *
 * La rejilla se queda en una sola columna, que es el valor base: no hace falta
 * declarar nada. Lo unico que cambia respecto a movil son el aire y la proporcion.
 */
@media (min-width: 48em) {

	.dcn-hero__interior {
		gap: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	}
}

/*
 * COMPOSICION INTEGRADA — desde 64em.
 *
 * Aqui el hero deja de ser «columna de texto + tarjeta con foto» y pasa a ser una
 * sola escena: la composicion ocupa el hero entero, a sangre por los cuatro lados, y
 * el contenido se apoya encima del espacio negativo crema que la propia imagen trae
 * a la izquierda.
 *
 * La rejilla se conserva —no se destruye la maquetacion— pero la columna visual sale
 * del flujo y pasa a ser el fondo de la seccion. El contenido queda por encima con
 * z-index, sin necesidad de reordenar el marcado ni de duplicar la imagen.
 *
 * min-height con svh y no vh: en moviles y tablets con barra de navegador que se
 * oculta, vh salta al hacer scroll. Aqui no aplica todavia, pero la unidad correcta
 * es la misma y evita sorpresas si el breakpoint baja.
 *
 * EL UMBRAL ES 76em, NO 64em, y se fijo mirando el render a 1024 px: a ese ancho la
 * ventana es bastante mas cuadrada que el archivo, el recorte se come el espacio
 * negativo de la izquierda y los productos invaden la zona del texto. Por debajo de
 * 76em vuelve la composicion de dos columnas, que a esos anchos se lee mejor.
 */
@media (min-width: 76em) {

	.dcn-hero {
		display: grid;
		align-items: center;
		min-height: min(38rem, 78svh);
		padding-block: clamp(3rem, 2rem + 3vw, 5rem);
	}

	/* Fuera del flujo: la composicion es el fondo de la seccion. */
	.dcn-hero__visual {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	/*
	 * Velo crema SOLO en la mitad izquierda y en degradado hasta transparente. No es
	 * un overlay oscuro sobre la imagen: refuerza el espacio negativo que la propia
	 * composicion ya tiene y se apaga antes de llegar a los productos, que no se
	 * oscurecen ni se tapan.
	 */
	.dcn-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		/*
		 * Los topes se ajustaron mirando el render, no a ojo sobre el codigo: el texto
		 * llega hasta ~42% del ancho y los productos empiezan hacia el 28%, asi que el
		 * velo aguanta opaco hasta el 30% y se apaga por completo antes del 60%. Sobre
		 * la zona de producto nunca pasa de 0,40: se ven enteros y sin oscurecer.
		 */
		background: linear-gradient(
			to right,
			rgba(247, 239, 225, 0.96) 0%,
			rgba(247, 239, 225, 0.88) 30%,
			rgba(247, 239, 225, 0.40) 45%,
			rgba(247, 239, 225, 0) 60%
		);
	}

	/*
	 * El contenedor interior se queda SIN position, y es deliberado: .dcn-hero__visual
	 * es hijo suyo, asi que si lo posicionamos aqui el «inset: 0» de la imagen se
	 * resolveria contra el contenedor —con su padding lateral— y la composicion dejaria
	 * de sangrar. Estatico, el ancestro posicionado pasa a ser .dcn-hero y la imagen
	 * cubre la seccion entera.
	 *
	 * Solo la columna de contenido se eleva: al ser hija de un contenedor estatico
	 * participa en el contexto de apilamiento de .dcn-hero y basta con posicionarla
	 * para que quede por encima de la imagen y del velo, ambos en z-index 0.
	 */
	.dcn-hero__interior {
		/* Anula el position:relative que este contenedor recibe mas arriba para sostener
		   la mancha decorativa. Aqui esa mancha esta apagada y, si el contenedor sigue
		   posicionado, el inset:0 de la composicion se resuelve contra el y la imagen
		   deja de sangrar. */
		position: static;
		grid-template-columns: minmax(0, 32rem);
		align-items: center;
	}

	.dcn-hero__contenido {
		position: relative;
		z-index: 1;
	}
}

.dcn-hero__titulo {
	font-family: var(--dcn-fuente-titulo);
	font-size: clamp(2.125rem, 1.35rem + 3.4vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: var(--dcn-espacio-s);
}

/* Serif tambien aqui: el lema es la linea editorial de la marca y lleva el acento. */
.dcn-hero__lema {
	font-family: var(--dcn-fuente-titulo);
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.3;
	max-width: var(--dcn-ancho-texto);
	margin-bottom: var(--dcn-espacio-s);
}

/*
 * Detalle verde de marca. El dato lo lleva el texto, no el color (Maestro §26).
 *
 * Usa --dcn-verde-oscuro y no --dcn-verde por una razon medible: desde que el hero
 * tiene fondo crema, el verde de marca daria ~4,4:1 sobre el, por debajo del minimo
 * AA para este tamaño. El verde oscuro da ~6,7:1. Es texto pequeño en mayusculas y
 * espaciado, justo el caso que menos perdona.
 */
.dcn-hero__etiqueta {
	display: inline-block;
	margin-bottom: 0;
	color: var(--dcn-verde-oscuro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	font-weight: 600;
}

/*
 * Micro-beneficios. Tres items en fila con filete vertical entre ellos, como en la
 * referencia. El filete lo dibuja el borde izquierdo a partir del segundo, de modo
 * que no hace falta ningun elemento extra ni un separador al final.
 *
 * SIN separadores por defecto, y es una decision, no un olvido. El filete vertical de
 * la referencia solo funciona si los tres caben en una fila: en cuanto uno baja de
 * linea, la segunda empieza con una barra suelta y el recurso se vuelve en contra.
 * Un borde no sabe si su elemento abre linea, y CSS no permite preguntarlo.
 *
 * Asi que los filetes aparecen solo desde 76em, el unico ancho donde la columna de
 * contenido da de sobra para los tres en fila. Por debajo mandan el espacio y el
 * icono, que ya separan de sobra.
 */
.dcn-hero__ventajas {
	list-style: none;
	margin: var(--dcn-espacio-m) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcn-espacio-xs) var(--dcn-espacio-m);
}

.dcn-hero__ventaja {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--dcn-color-texto);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Fila unica con filete vertical: solo donde caben los tres sin envolver. */
@media (min-width: 76em) {

	.dcn-hero__ventajas {
		flex-wrap: nowrap;
		gap: 0;
	}

	.dcn-hero__ventaja {
		padding-inline: var(--dcn-espacio-s);
		border-left: 1px solid var(--dcn-color-borde);
		white-space: nowrap;
	}

	.dcn-hero__ventaja:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

.dcn-hero__ventaja-icono {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	fill: var(--dcn-color-acento);
}

/* Por debajo de 30em se apilan: en una fila quedarian ilegibles. */
@media (max-width: 29.99em) {

	.dcn-hero__ventajas {
		display: grid;
		gap: var(--dcn-espacio-xs);
	}
}

.dcn-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcn-espacio-s);
	/* Titulo, lema, etiqueta y CTA leen como un solo bloque; el CTA conserva algo
	   mas de aire que el resto para mantener la jerarquia. */
	margin-top: var(--dcn-espacio-m);
}

/* Por debajo de 480px los CTA ocupan el ancho completo: son mas comodos de pulsar
   y evitan que el texto del boton se parta. */
.dcn-hero__acciones .dcn-boton {
	width: 100%;
}

@media (min-width: 30em) {

	.dcn-hero__acciones .dcn-boton {
		width: auto;
	}
}

/*
 * Area visual del hero.
 * Contenedor preparado para recibir la composicion fotografica REAL de NICE.
 * No contiene ninguna ilustracion, ni imagen generada, ni producto figurado
 * (Maestro §8, §35, §38.10).
 */

.dcn-hero__marco {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: var(--dcn-espacio-m);
	border: 1px solid var(--dcn-color-borde);
	border-radius: var(--dcn-radio-l);
	background: var(--dcn-verde-tenue);
	overflow: hidden;
}

/* Filete de marca del marco fotografico. 4px en lugar de 3: sobre fondo crema un
   filete de 3px se diluia. */
.dcn-hero__marco::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	top: 0;
	height: 4px;
	background: var(--dcn-verde);
}

/* El marcador sigue siendo identificable como PENDIENTE, pero no domina la
   seccion: centrado, pequeño y sobre fondo blanco. */
.dcn-hero__marco .dcn-pendiente {
	max-width: 38ch;
	margin: 0;
	background: var(--dcn-color-fondo);
	font-size: 0.8125rem;
	text-align: center;
}

/*
 * Con fotografia seleccionada el marco deja de ser un hueco reservado y pasa a
 * ser el borde de la imagen: se retira el relleno y la proporcion 4/3 fija, que
 * solo existian para sostener el marcador PENDIENTE.
 *
 * La fotografia conserva su proporcion real —es panoramica— en lugar de
 * recortarse a 4/3: se muestra completa, sin deformar y sin perder parte de la
 * composicion aprobada (Maestro §8, §38.9). El marco, el borde redondeado y el
 * filete verde no cambian.
 */
.dcn-hero__marco--con-imagen {
	aspect-ratio: auto;
	padding: 0;
}

/*
 * Desde 64em la fotografia sangra (ver el bloque de .dcn-hero__visual mas arriba) y
 * el marco desaparece del todo: sin borde, sin esquinas redondeadas y sin fondo. Lo
 * que queda es la fotografia, como en la referencia visual original.
 *
 * Este bloque va AQUI y no junto al resto de reglas de 64em por una razon concreta:
 * tiene la misma especificidad que .dcn-hero__marco, asi que solo gana si aparece
 * despues en el archivo. Colocado antes, el borde y el radio de la regla base lo
 * anulaban en silencio.
 */
@media (min-width: 64em) {

	.dcn-hero__marco--con-imagen {
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	/* El filete de marca se conserva, algo mas firme y pegado al borde de la imagen. */
	.dcn-hero__marco--con-imagen::before {
		height: 5px;
	}
}

/* Ocupa el ancho del marco; la altura la fija la proporcion del archivo. */
.dcn-hero__imagen {
	width: 100%;
	height: auto;
}

/*
 * COMPOSICION DEL HERO por debajo de 64em: texto primero, imagen despues, apilados,
 * que es lo que ya funcionaba y lo que se aprobo mantener.
 *
 * El archivo es muy panoramico —1915x821, casi 2,33:1— y a ancho completo en movil
 * quedaria una franja demasiado baja. Se le impone una proporcion mas util y se
 * encuadra a la derecha con object-position, de modo que se recorta el crema
 * sobrante y NUNCA los productos. Sin borde, sin radio de tarjeta y sin marco: la
 * imagen tampoco aqui debe parecer una ficha.
 */
.dcn-hero__composicion {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 100% 50%;
}

/*
 * Desde tablet la composicion se muestra con LA PROPORCION REAL DEL ARCHIVO,
 * 1915 / 821. Al coincidir con el original, object-fit: cover no recorta nada: se ve
 * el surtido entero, de coco a dulce de leche, y la imagen se lee como una franja
 * fotografica editorial en lugar de como un recuadro.
 *
 * Es el motivo de no imponer aqui 16/9: cualquier proporcion mas cuadrada obligaria
 * a recortar el archivo por los lados para rellenar, y con el la escena.
 */
@media (min-width: 48em) {

	.dcn-hero__composicion {
		aspect-ratio: 1915 / 821;
	}
}

/*
 * Desde 64em la composicion deja de tener proporcion propia y pasa a rellenar el
 * hero entero, que es lo que la convierte en escena unica en lugar de en una imagen
 * colocada dentro de la seccion.
 *
 * Va AQUI, y no junto al resto de reglas del hero, por el mismo motivo que el marco:
 * misma especificidad que las reglas base de arriba, asi que solo gana si aparece
 * despues en el archivo. Colocada antes, el aspect-ratio de 48em la anulaba.
 *
 * object-position a la derecha: si la ventana es mas estrecha que la proporcion del
 * archivo, lo que se recorta es el margen crema sobrante de la izquierda y NUNCA los
 * productos, concentrados a la derecha. El recorte lo hace el navegador al pintar;
 * el archivo no se toca.
 */
@media (min-width: 76em) {

	.dcn-hero__composicion {
		aspect-ratio: auto;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 100% 50%;
	}
}

/* Botones — identificables por forma y borde, no solo por color (Maestro §26) */

.dcn-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dcn-espacio-xs);
	/* Algo mas de cuerpo que antes —0.8125/1.5— para que el CTA gane presencia sin
	   cambiar de color ni de forma. */
	padding: 0.9375rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--dcn-radio-m);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	transition: background-color var(--dcn-transicion), border-color var(--dcn-transicion), color var(--dcn-transicion);
}

/* CTA principal: verde NICE relleno. Blanco sobre #008125 = 5,04:1. */
.dcn-boton--principal {
	background: var(--dcn-color-acento);
	border-color: var(--dcn-color-acento);
	color: var(--dcn-color-acento-texto);
}

.dcn-boton--principal:hover {
	background: var(--dcn-color-acento-hover);
	border-color: var(--dcn-color-acento-hover);
}

/*
 * CTA secundario. Sobre fondo crema el contorno gris anterior se perdia: pasa a
 * fondo blanco y borde caramelo, de modo que se lee como boton sin competir con el
 * principal, que sigue siendo el unico relleno en verde.
 *
 * El caramelo aqui es BORDE, no texto: 3,7:1 cumple el minimo de 3:1 que WCAG
 * 1.4.11 pide a un componente de interfaz. El texto sigue en #1a1a1a, 17,4:1.
 */
.dcn-boton--secundario {
	background: var(--dcn-blanco);
	border-color: var(--dcn-caramelo);
	color: var(--dcn-color-texto);
}

.dcn-boton--secundario:hover {
	background: var(--dcn-caramelo-tenue);
	border-color: var(--dcn-caramelo-oscuro);
	color: var(--dcn-color-texto);
}

/*
 * CTA inverso: blanco relleno sobre fondo verde. Blanco sobre #008125 y verde
 * sobre blanco dan 5,04:1 en ambos sentidos, por encima del minimo AA.
 */
.dcn-boton--inverso {
	background: var(--dcn-blanco);
	border-color: var(--dcn-blanco);
	/* Verde oscuro y no el de marca: sobre blanco da 8,3:1 frente a 5,04:1, y el
	   boton es el elemento de conversion de la pagina. */
	color: var(--dcn-verde-oscuro);
}

.dcn-boton--inverso:hover {
	background: var(--dcn-verde-tenue);
	border-color: var(--dcn-verde-tenue);
}

/*
 * Glifo dentro del boton. Hereda el color del texto con currentColor, asi que sirve
 * igual sobre el verde del CTA principal y sobre el blanco del inverso, sin una
 * regla por variante. Decorativo: la etiqueta del boton ya dice a que lleva.
 */
.dcn-boton__icono {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
}

/* El subrayado es la señal que no depende del color (Maestro §26). */
.dcn-boton:hover,
.dcn-boton:focus-visible {
	text-decoration: underline;
}

/*
 * FRANJA DE BENEFICIOS — recuperada de la referencia original, 19/09/2026.
 *
 * Primera superficie de verde profundo de la pagina. Va inmediatamente despues del
 * hero y su trabajo es doble: cortar el crema con autoridad y contar de una vez las
 * cinco condiciones comerciales confirmadas.
 *
 * No lleva .dcn-seccion: no quiere el ritmo vertical de las secciones de contenido
 * ni su filete inferior. Es una banda, no una seccion de lectura.
 */
/*
 * El relleno arranca mas ajustado que antes —2,25rem pasan a 1,75rem— para que en
 * telefono la franja no se estire. En pantallas grandes acaba igual que estaba.
 */
.dcn-beneficios {
	background: var(--dcn-verde-profundo);
	color: var(--dcn-blanco);
	padding-block: clamp(1.75rem, 1.15rem + 2.6vw, 3.25rem);
}

/*
 * Reparto en columnas. auto-fit quedo descartado el 19/09/2026: con cinco elementos
 * producia un 3 + 2 con la segunda fila descolgada a la izquierda, que es
 * precisamente el aspecto que hay que evitar. Cinco no se reparte bien solo.
 *
 * Los escalones se fijan a mano para que todos queden equilibrados:
 *
 *   hasta 24em ........ 1 columna (telefonos muy estrechos)
 *   24em a 64em ....... 2 + 2 + 1, con el quinto CENTRADO
 *   desde 64em ........ 5 en una sola fila
 *
 * Nunca hay una fila huerfana alineada a la izquierda.
 *
 * En movil se paso de una columna a dos el 19/09/2026: apilados de uno en uno, los
 * cinco beneficios estiraban la franja y la volvian ruidosa. En dos columnas la
 * seccion se lee de un vistazo, que es para lo que existe.
 */
.dcn-beneficios__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dcn-espacio-m);
}

/*
 * Movil y tablet comparten reparto: dos columnas y el quinto centrado ocupando las
 * dos. El limite inferior de 24em protege a los telefonos muy estrechos, donde dos
 * columnas dejarian los titulos partidos palabra a palabra.
 */
@media (min-width: 24em) and (max-width: 63.99em) {

	.dcn-beneficios__lista {
		grid-template-columns: repeat(2, 1fr);
		/* El row-gap queda en 1rem y el divisor añade su propio padding-top: entre
		   filas se ven 2rem en total, suficiente para que la linea respire sin
		   devolver la seccion al alto que tenia antes de 3F. */
		gap: var(--dcn-espacio-s) var(--dcn-espacio-m);
	}

	/*
	 * El quinto ocupa las dos columnas y va centrado. Lleva su divisor horizontal por
	 * el selector de arriba, pero NINGUN filete vertical: es impar, asi que nth-child(2n)
	 * no lo alcanza. Se le anula el padding-left por si acaso, para que el centrado sea
	 * real y no quede desplazado.
	 */
	.dcn-beneficio:last-child {
		grid-column: 1 / -1;
		max-width: 24rem;
		margin-inline: auto;
		padding-left: 0;
		border-left: 0;
		text-align: center;
	}

	/* Centrado tambien el icono del quinto, o quedaria descolgado a la izquierda. */
	.dcn-beneficio:last-child .dcn-beneficio__icono {
		margin-inline: auto;
	}
}

/* Desde tablet el aire entre columnas puede ser mayor: hay sitio. */
@media (min-width: 48em) and (max-width: 63.99em) {

	.dcn-beneficios__lista {
		column-gap: var(--dcn-espacio-l);
	}
}

@media (min-width: 64em) {

	.dcn-beneficios__lista {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--dcn-espacio-s);
	}
}

/*
 * SEPARADORES — un lenguaje, tres repartos. 19/09/2026.
 *
 * La referencia original separaba los beneficios con filetes verticales sutiles, y
 * en escritorio eso ya funcionaba. El problema era que al bajar a 2 + 2 + 1 los
 * filetes desaparecian y la franja se volvia ruidosa. Aqui el mismo lenguaje se
 * adapta al reparto de cada tramo en lugar de apagarse.
 *
 * La regla se escribe AHORA por tramo y no como «base + anulacion»: antes el borde
 * se declaraba para todos y se retiraba despues, y cada reparto nuevo obligaba a
 * acordarse de apagarlo. Asi cada anchura declara solo lo suyo.
 *
 * COMO SE ELIGEN LOS ELEMENTOS, con la rejilla [1][2] / [3][4] / [5 a lo ancho]:
 *
 *   nth-child(2n)   -> 2 y 4: la columna DERECHA. Lleva el filete vertical a su
 *                      izquierda. El 5 es impar, asi que nunca lo recibe.
 *   nth-child(n+3)  -> 3, 4 y 5: todo lo que NO esta en la primera fila. Lleva el
 *                      divisor horizontal encima. Salen exactamente dos lineas.
 *
 * Ninguna de las dos toca al ultimo por debajo: no hay divisor colgando al final.
 */

/*
 * Telefonos muy estrechos: una sola columna. Sin verticales —no hay dos columnas que
 * separar— y con un divisor horizontal entre elementos consecutivos. El selector de
 * hermano adyacente deja fuera al primero por definicion.
 */
@media (max-width: 23.99em) {

	.dcn-beneficio + .dcn-beneficio {
		padding-top: var(--dcn-espacio-s);
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}
}

/*
 * Movil ancho y tablet: reparto 2 + 2 + 1 con los dos ejes.
 *
 * El divisor horizontal se corta solo en el hueco entre columnas, porque el
 * column-gap no pinta borde: queda una linea partida por la mitad, que separa sin
 * llegar a parecer una tabla.
 *
 * Opacidad algo menor que en escritorio —0,16 frente a 0,18— porque aqui hay mas
 * lineas en menos superficie y conviene que pesen menos.
 */
@media (min-width: 24em) and (max-width: 63.99em) {

	.dcn-beneficio:nth-child(2n) {
		padding-left: var(--dcn-espacio-s);
		border-left: 1px solid rgba(255, 255, 255, 0.16);
	}

	.dcn-beneficio:nth-child(n+3) {
		padding-top: var(--dcn-espacio-s);
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}
}

/*
 * Escritorio: los cinco en fila con filete vertical, tal como quedo aprobado. Es el
 * mismo resultado de antes; lo unico que cambia es que ahora se declara dentro de su
 * tramo en vez de heredarse y anularse.
 */
@media (min-width: 64em) {

	.dcn-beneficio:not(:first-child) {
		padding-left: var(--dcn-espacio-m);
		border-left: 1px solid rgba(255, 255, 255, 0.18);
	}
}

/*
 * Icono algo menor y mas pegado al titulo en movil: los tres elementos de cada
 * beneficio —icono, titulo y texto— se leen como un bloque, no como tres piezas
 * separadas. Recupera tamaño en cuanto hay ancho.
 */
.dcn-beneficio__icono {
	display: block;
	width: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	height: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	margin-bottom: 0.375rem;
	fill: var(--dcn-blanco);
}

/* Blanco puro sobre el verde profundo: 12,3:1. */
.dcn-beneficio__titulo {
	margin: 0 0 0.25rem;
	color: var(--dcn-blanco);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.3;
}

/* Verde muy claro sobre el verde profundo: 8,9:1. Secundario, no apagado. */
.dcn-beneficio__texto {
	margin: 0;
	color: var(--dcn-verde-claro-texto);
	font-size: 0.9375rem;
	line-height: 1.5;
}

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

/*
 * Productos — escaparate visual de la gama (Maestro §7).
 * No es ecommerce: no hay precio, ni carrito, ni control de compra (Maestro §3).
 * La fotografia real sera el elemento protagonista de cada tarjeta.
 */

/*
 * Titulo centrado con el filete debajo, tambien centrado: es el tratamiento mas
 * editorial de la referencia y aqui marca Productos como el escaparate de la pagina.
 * Solo en esta seccion; las demas mantienen el titulo alineado a la izquierda.
 */
.dcn-productos .dcn-seccion__titulo {
	text-align: center;
}

.dcn-productos .dcn-seccion__titulo::before {
	margin-inline: auto;
}

.dcn-productos__intro {
	max-width: var(--dcn-ancho-texto);
	margin-bottom: var(--dcn-espacio-l);
}

@media (min-width: 48em) {

	.dcn-productos__intro {
		margin-inline: auto;
		text-align: center;
	}
}

.dcn-productos__rejilla {
	display: grid;
	/*
	 * Mas aire entre filas que entre columnas, pero lo justo para que las seis
	 * familias se lean como una sola coleccion 3x2 y no como bloques sueltos.
	 * 2rem no existe como token de espaciado: el mas proximo, --dcn-espacio-l,
	 * son 2,5rem y separaba demasiado las dos filas.
	 */
	row-gap: 2rem;
	column-gap: var(--dcn-espacio-m);
	grid-template-columns: 1fr;
}

/*
 * Tarjeta de familia.
 * Sin fondo ni borde propios: la unica superficie es el area fotografica. Asi no
 * parece un componente de tienda y el producto manda sobre la caja (Maestro §1).
 * No es un enlace: en la version 1 no existen fichas individuales.
 */

.dcn-producto {
	display: flex;
	flex-direction: column;
	gap: var(--dcn-espacio-s);
}

/*
 * Area de la fotografia. La proporcion es la misma 4:3 del archivo, asi que
 * object-fit: cover no recorta nada: solo protege de redondeos subpixel.
 * Sin filtros ni superposiciones: la imagen se muestra tal cual (Maestro §8).
 */
.dcn-producto__foto {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--dcn-color-borde);
	border-radius: var(--dcn-radio-l);
	background: var(--dcn-color-superficie);
	overflow: hidden;
	transition: border-color var(--dcn-transicion);
}

.dcn-producto__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Solo mientras falte la fotografia real de esa familia. */
.dcn-producto__foto--pendiente {
	display: grid;
	place-items: center;
	padding: var(--dcn-espacio-s);
}

/*
 * Microinteraccion minima, solo en dispositivos con cursor real. Un cambio de
 * borde y nada mas: sin elevacion ni sombra, que insinuarian que la tarjeta se
 * puede pulsar. El bloque prefers-reduced-motion del final anula la transicion.
 */
@media (hover: hover) {

	.dcn-producto:hover .dcn-producto__foto {
		border-color: var(--dcn-verde);
	}
}

/* Marcador compacto: identifica el hueco sin dominar la tarjeta. */
.dcn-producto__pendiente {
	margin: 0;
	padding: 0.375rem 0.625rem;
	border: 1px dashed var(--dcn-color-aviso-borde);
	border-radius: var(--dcn-radio);
	background: var(--dcn-color-aviso-fondo);
	color: var(--dcn-color-aviso-texto);
	font-size: 0.75rem;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: break-word;
}

.dcn-producto__cuerpo {
	display: grid;
	gap: var(--dcn-espacio-xs);
}

.dcn-producto__nombre {
	margin: 0;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
}

/* Formato o peso. Dato del producto, no reclamo: sin fondo, sin borde y sin
   pastilla, para que no se lea como una etiqueta promocional ni como un boton.
   Queda por debajo del nombre en jerarquia pero en el color de texto normal,
   que es el que conserva el contraste del cuerpo. */
/*
 * Peso o formato. Pasa a leerse como etiqueta del producto y no como una linea
 * mas de texto: es el unico dato duro de la tarjeta y el sitio donde el color
 * informa en lugar de decorar.
 *
 * La pastilla se ajusta al dato con justify-self, NO con display:inline-block:
 * .dcn-producto__cuerpo es un grid, sus hijos se blockifican y se estiran a la
 * columna entera, de modo que inline-block se ignora y el peso salia como una
 * barra de ancho completo.
 *
 * El texto va en caramelo oscuro, 6,2:1 sobre blanco y ~5,9:1 sobre la pastilla:
 * el caramelo claro NO se usa para texto (ver base.css).
 */
.dcn-producto__formato {
	justify-self: start;
	margin: 0;
	padding: 0.125rem 0.5rem;
	border-radius: var(--dcn-radio);
	background: var(--dcn-caramelo-tenue);
	color: var(--dcn-caramelo-oscuro);
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* «VARIEDADES» en caramelo oscuro: 6,2:1 sobre blanco. */
.dcn-producto__etiqueta {
	margin: 0;
	color: var(--dcn-caramelo-oscuro);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	font-weight: 600;
}

/* Informacion secundaria. Texto, no controles. */
.dcn-producto__variedades {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--dcn-espacio-xs);
	color: var(--dcn-color-texto-suave);
	font-size: 0.9375rem;
}

/* Unico detalle verde de la seccion. Decorativo: el dato lo lleva el texto. */
/* Separador decorativo en caramelo. Deja el verde para la marca y la conversion,
   no para la puntuacion de una lista. */
.dcn-producto__variedades li:not(:first-child)::before {
	content: "·";
	margin-right: var(--dcn-espacio-xs);
	color: var(--dcn-caramelo);
}

/* Mientras el marcador sea el unico contenido ocupa la fila entera, en lugar de
   quedar descolgado en la primera celda con el resto de la rejilla vacia. */
.dcn-productos__rejilla > .dcn-pendiente:only-child {
	grid-column: 1 / -1;
}

@media (min-width: 40em) {

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

@media (min-width: 64em) {

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

/*
 * Historia — pausa narrativa despues de la rejilla de Productos (Maestro §11).
 *
 * Rompe deliberadamente con la seccion anterior: fondo calido a sangre completa,
 * dos columnas en lugar de rejilla, marco vertical en lugar de 4:3 y un unico
 * recurso editorial. Sin tarjetas, sin iconos y sin linea de tiempo.
 */

.dcn-historia {
	background: var(--dcn-color-fondo-alt);
	/* El cambio de fondo ya separa de la seccion siguiente: el filete sobra. */
	border-bottom: 0;
	padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.dcn-historia__interior {
	display: grid;
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	align-items: center;
}

/*
 * Dos columnas solo a partir de 64em. A 768px el texto caeria a unos 50
 * caracteres por linea, demasiado estrecho para un relato (guia editorial 5).
 */
@media (min-width: 64em) {

	/*
	 * La columna visual cede algo de ancho a la de texto: el marco sigue siendo
	 * el ancla de la composicion, pero deja de competir con el relato. Se ajusta
	 * la columna, no el marco, para que este siga ocupandola a ras y no quede
	 * flotando con hueco muerto a su derecha.
	 */
	/*
	 * 19/09/2026: la fotografia pasa a ser la columna mayor, como en la referencia.
	 * Antes era 40fr de foto y 60fr de texto; ahora al reves.
	 */
	.dcn-historia__interior {
		grid-template-columns: 52fr 48fr;
	}
}

/*
 * Marco preparado para la fotografia real. Vertical 4:5, no el 4:3 de Productos,
 * y blanco sobre el fondo calido: la superficie se invierte respecto a las
 * tarjetas de producto para que las dos secciones no se confundan.
 */

.dcn-historia__marco {
	display: grid;
	/* El marcador se apoya abajo. En Productos va centrado: otra diferencia mas. */
	align-content: end;
	aspect-ratio: 4 / 5;
	/* A una columna, sin tope, el marco se convertiria en un bloque enorme. */
	max-width: 26rem;
	padding: var(--dcn-espacio-m);
	border: 1px solid var(--dcn-color-borde);
	border-radius: var(--dcn-radio-l);
	background: var(--dcn-color-fondo);
	overflow: hidden;
}

@media (min-width: 64em) {

	.dcn-historia__marco {
		max-width: none;
	}
}

.dcn-historia__marco .dcn-pendiente {
	margin: 0;
	font-size: 0.8125rem;
}

/*
 * Con fotografia seleccionada el marco deja de ser un hueco reservado y pasa a
 * ser el borde de la imagen: se retira solo el relleno.
 *
 * La proporcion editorial 4:5 del marco NO se toca: es un rasgo deliberado de
 * esta seccion y la fotografia se encuadra dentro de ella. El borde, el radio y
 * el recorte del contenedor siguen siendo los mismos.
 *
 * align-content vuelve a «stretch» SOLO en este estado. La regla base lo pone
 * en «end» para apoyar abajo el marcador PENDIENTE; con esa alineacion la fila
 * de la rejilla se queda del alto de su contenido y la imagen no llegaria a
 * llenar el 4:5, dejando un hueco blanco arriba. La regla base no se toca: sin
 * fotografia, el marcador sigue apoyado abajo exactamente igual que hasta ahora.
 */
.dcn-historia__marco--con-imagen {
	align-content: stretch;
	padding: 0;
}

/*
 * La imagen llena el marco 4:5 sin deformarse: object-fit recorta lo que sobra
 * en lugar de estirar, y el encuadre se centra. La fotografia que se elija debe
 * ser adecuada para este formato vertical.
 */
.dcn-historia__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * El filete sobre el titulo dejo de ser exclusivo de esta seccion: hoy es el gesto
 * comun definido arriba, y aqui se pinta en caramelo por ser seccion narrativa.
 * Decorativo y vacio, asi que ningun lector de pantalla lo anuncia (Maestro §26).
 */

/* Ancho de lectura comodo: el texto no se estira aunque la columna crezca. */
.dcn-historia__texto {
	max-width: 34rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.dcn-historia__texto p:last-child {
	margin-bottom: 0;
}

/*
 * Modificador de seccion, no cambio de la clase global: .dcn-pendiente se
 * mantiene intacta para el resto de secciones. Aqui solo se compacta, sin
 * alterar el estado visual de PENDIENTE ni la legibilidad: 13px es el mismo
 * cuerpo que ya usan los marcadores del hero y de las tarjetas de producto.
 */
.dcn-historia__contenido .dcn-pendiente {
	margin-top: var(--dcn-espacio-m);
	margin-bottom: 0;
	padding: 0.625rem 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
}

/*
 * Elaboracion artesanal — Maestro §10.
 *
 * Tercera composicion distinta de la pagina: ni la rejilla de Productos ni el
 * bloque editorial de Historia. Aqui manda el area multimedia, 16:9 y a 60% del
 * ancho, sobre fondo blanco. El texto pasa a columna estrecha de acompañamiento.
 */

.dcn-elaboracion {
	padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.dcn-elaboracion__interior {
	display: grid;
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	align-items: center;
}

/*
 * Dos columnas solo a partir de 64em, por el mismo motivo que en Historia: a
 * 768px la columna de texto caeria a unos 35 caracteres por linea.
 */
@media (min-width: 64em) {

	.dcn-elaboracion__interior {
		grid-template-columns: 60fr 40fr;
	}
}

/*
 * Marco preparado para el video real de elaboracion o una fotografia real del
 * proceso. 16:9, distinto del 4:3 de Productos y del 4:5 de Historia.
 */

.dcn-elaboracion__marco {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	padding: var(--dcn-espacio-m);
	border: 1px solid var(--dcn-color-borde);
	border-radius: var(--dcn-radio-l);
	background: var(--dcn-color-superficie);
	overflow: hidden;
}

/*
 * Unico recurso editorial de la seccion: borde verde parcial en el canto
 * izquierdo. Eje vertical, para no repetir el filete horizontal del hero ni la
 * linea sobre el titulo de Historia. Decorativo y vacio (Maestro §26).
 */
.dcn-elaboracion__marco::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block: 0;
	left: 0;
	/* 4px, igual que el filete del hero: los dos acentos de marca de la pagina
	   tienen el mismo grosor y se leen como el mismo gesto. */
	width: 4px;
	background: var(--dcn-verde);
}

/* Marcador compacto: identifica el hueco sin llenar el marco. */
.dcn-elaboracion__marco .dcn-pendiente {
	max-width: 44ch;
	margin: 0;
	padding: 0.625rem 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
}

/*
 * Con fotografia seleccionada el marco deja de ser un hueco reservado y pasa a
 * ser el borde de la imagen: se retira solo el relleno.
 *
 * La proporcion 16:9 del marco NO se toca: es un rasgo deliberado de esta
 * seccion —la tercera proporcion distinta de la portada— y la fotografia se
 * encuadra dentro de ella. El borde, el radio y el recorte del contenedor
 * siguen siendo los mismos.
 *
 * place-items pasa a «stretch» SOLO en este estado. La regla base lo pone en
 * «center» para centrar el marcador PENDIENTE en el hueco; con la fotografia
 * dentro lo que interesa es que ocupe la casilla entera, y declararlo explicito
 * evita depender de como resuelva cada navegador el alto de una imagen centrada.
 * La regla base no se toca: sin fotografia, el marcador sigue centrado
 * exactamente igual que hasta ahora.
 *
 * El filete verde ::before se mantiene: es un elemento posicionado, asi que
 * pinta POR ENCIMA de la imagen y la seccion conserva su firma editorial.
 */
.dcn-elaboracion__marco--con-medio {
	padding: 0;
	place-items: stretch;
}

/*
 * La imagen llena el marco 16:9 sin deformarse: object-fit recorta lo que sobra
 * en lugar de estirar, y el encuadre se centra. La fotografia que se elija debe
 * ser adecuada para este formato horizontal.
 */
.dcn-elaboracion__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Ancho de lectura limitado: el texto no se estira aunque la columna crezca. */
.dcn-elaboracion__texto {
	max-width: 34rem;
}

.dcn-elaboracion__texto p:last-child {
	margin-bottom: 0;
}

/*
 * CTA comercial — principal punto de conversion antes de Contacto (Maestro §12).
 *
 * Unico bloque de la pagina con el verde NICE a sangre completa. Es una seccion
 * de conversion, no un banner: sin tarjetas, sin sombras y sin decoracion.
 * El ancho de lectura queda contenido para que el texto no se estire.
 */

/*
 * 19/09/2026: pasa del verde de marca al VERDE PROFUNDO. Gana peso y deja de
 * competir con los botones, que son los que llevan el verde NICE.
 *
 * La referencia ponia ademas una fotografia de fondo oscurecida. No se implementa:
 * las unicas fotografias que viajan en el paquete son el activo Open Graph —que
 * incluye el logotipo y detras de un velo quedaria raro— porque el build excluye
 * assets/images/productos/. Queda como decision del responsable.
 */
.dcn-cta {
	background: var(--dcn-verde-profundo);
	color: var(--dcn-blanco);
	/* El propio bloque de color separa de la seccion siguiente. */
	border-bottom: 0;
	padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.dcn-cta .dcn-seccion__titulo {
	color: var(--dcn-blanco);
}

.dcn-cta__interior {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.dcn-cta__texto {
	font-size: 1.0625rem;
	line-height: 1.6;
}

.dcn-cta__texto p:last-child {
	margin-bottom: 0;
}

.dcn-cta__acciones {
	margin-top: var(--dcn-espacio-l);
}

/*
 * El contorno de foco global es #0b5fff y sobre el verde da 1,02:1: seria
 * invisible justo en la seccion de conversion. Aqui se pinta en blanco, 5,04:1
 * sobre el fondo (Maestro §26). La regla global de base.css no se toca.
 */
.dcn-cta :focus-visible {
	outline-color: var(--dcn-blanco);
}

/*
 * Presencia en España — Maestro §5 y §6.
 *
 * Cuarta composicion de la pagina: dos columnas equilibradas, distintas del
 * 45/55 del hero, del 40/60 de Historia y del 60/40 de Elaboracion.
 * A la izquierda, una representacion lineal abstracta; a la derecha, el panel
 * con las seis zonas confirmadas en texto.
 */

/*
 * Fondo verde tenue a sangre. El verde entra aqui como AMBIENTE para que el CTA
 * comercial que viene despues no aparezca de la nada. La relacion con el panel se
 * invierte respecto a la version anterior: antes panel verde sobre blanco; ahora
 * panel blanco sobre verde, que le da mas presencia, no menos.
 */
.dcn-presencia {
	background: var(--dcn-verde-tenue);
	/* El propio bloque de color separa de la seccion siguiente. */
	border-bottom: 0;
	padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.dcn-presencia__interior {
	display: grid;
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	align-items: start;
}

@media (min-width: 64em) {

	.dcn-presencia__interior {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * Representacion lineal y minimalista (Maestro §6). Composicion ABSTRACTA de
 * seis nodos encadenados por lineas finas: comunica presencia y distribucion
 * sin dibujar geografia. Las posiciones son esteticas y no corresponden a
 * ningun lugar real. Todo el bloque es decorativo y va con aria-hidden.
 *
 * La proporcion 2/1 es fija a proposito: al escalar el contenedor de forma
 * solidaria, las posiciones en %, las longitudes en % y los angulos siguen
 * encajando en cualquier ancho, sin JavaScript.
 */

.dcn-presencia__grafico {
	position: relative;
	aspect-ratio: 2 / 1;
	margin-top: var(--dcn-espacio-m);
	/* A una columna, sin tope, la composicion se estiraria hasta convertirse en
	   un gran hueco vacio. Con el tope conserva densidad. */
	max-width: 30rem;
}

@media (min-width: 64em) {

	.dcn-presencia__grafico {
		max-width: none;
	}
}

.dcn-presencia__nodo,
.dcn-presencia__enlace {
	position: absolute;
}

/* Nodos: seis, de tamaño moderadamente distinto. El verde, solo aqui. */
.dcn-presencia__nodo {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--dcn-verde);
	transform: translate(-50%, -50%);
}

/* Lineas de conexion: neutro suave, para que no compitan con los nodos. */
.dcn-presencia__enlace {
	height: 1px;
	background: var(--dcn-color-borde);
	transform-origin: 0 50%;
}

.dcn-presencia__nodo--1 { left: 7%; top: 76%; }
.dcn-presencia__nodo--2 { left: 24%; top: 34%; width: 1rem; height: 1rem; }
.dcn-presencia__nodo--3 { left: 40%; top: 62%; width: 0.625rem; height: 0.625rem; }
.dcn-presencia__nodo--4 { left: 57%; top: 18%; }
.dcn-presencia__nodo--5 { left: 75%; top: 58%; width: 1rem; height: 1rem; }
.dcn-presencia__nodo--6 { left: 93%; top: 28%; width: 0.625rem; height: 0.625rem; }

/*
 * Halo apenas perceptible en los dos nodos mayores. Pasa a blanco porque la
 * seccion es ya verde tenue: mantenerlo en verde tenue lo habria hecho invisible.
 * Sigue siendo un halo discreto, no un anillo marcado.
 */
.dcn-presencia__nodo--2,
.dcn-presencia__nodo--5 {
	box-shadow: 0 0 0 0.5rem var(--dcn-blanco);
}

.dcn-presencia__enlace--1 { left: 7%; top: 76%; width: 27.019%; transform: rotate(-51.01deg); }
.dcn-presencia__enlace--2 { left: 24%; top: 34%; width: 21.260%; transform: rotate(41.19deg); }
.dcn-presencia__enlace--3 { left: 40%; top: 62%; width: 27.803%; transform: rotate(-52.31deg); }
.dcn-presencia__enlace--4 { left: 57%; top: 18%; width: 26.907%; transform: rotate(48.01deg); }
.dcn-presencia__enlace--5 { left: 75%; top: 58%; width: 23.431%; transform: rotate(-39.81deg); }

/*
 * Panel de zonas, ahora en blanco sobre el verde de la seccion. Recorta la lista
 * sobre el ambiente en lugar de fundirse con el.
 */

.dcn-presencia__zonas {
	padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	border: 1px solid var(--dcn-color-borde);
	border-radius: var(--dcn-radio-l);
	background: var(--dcn-blanco);
}

.dcn-presencia__subtitulo {
	margin-top: 0;
	margin-bottom: var(--dcn-espacio-m);
	color: var(--dcn-color-texto-suave);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.dcn-presencia__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dcn-espacio-s) var(--dcn-espacio-m);
}

/* Dos columnas en cuanto hay ancho: las seis zonas se leen como un bloque. */
@media (min-width: 26em) {

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

.dcn-presencia__lista li {
	display: flex;
	align-items: center;
	gap: var(--dcn-espacio-xs);
	font-size: 1.0625rem;
}

/*
 * Marca de zona. Decorativa y vacia: el dato lo lleva siempre el nombre en
 * texto, nunca el grafico (Maestro §26). No es un pin geografico ni un boton.
 */
.dcn-presencia__lista li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--dcn-verde);
}

/*
 * Contacto — Maestro §16.
 *
 * Vuelve al fondo claro despues del bloque verde del CTA: la pagina respira
 * antes del pie. Composicion editorial a dos columnas, sin tarjetas y sin
 * cuatro cajas: los canales se separan con filetes finos.
 *
 * WhatsApp es el canal principal (Maestro §18), pero aqui se destaca con
 * tipografia y espacio, no con otro boton verde: el CTA comercial esta justo
 * encima y dos llamadas consecutivas se estorbarian.
 */

.dcn-contacto {
	padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.dcn-contacto__interior {
	display: grid;
	gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	align-items: start;
}

@media (min-width: 64em) {

	.dcn-contacto__interior {
		grid-template-columns: 40fr 60fr;
	}
}

.dcn-contacto__intro {
	max-width: 32rem;
	margin-bottom: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Canal principal: cuerpo mayor y aire propio, sin caja. */

.dcn-contacto__principal {
	margin-bottom: var(--dcn-espacio-l);
}

.dcn-contacto__destacado {
	display: inline-block;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dcn-color-texto);
	/* El subrayado verde es el detalle de marca del bloque. */
	text-decoration-color: var(--dcn-verde);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
	transition: color var(--dcn-transicion);
}

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

/* Resto de canales: filetes finos, nunca tarjetas. */

.dcn-contacto__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.dcn-contacto__item {
	padding-block: var(--dcn-espacio-s);
	border-top: 1px solid var(--dcn-color-borde);
}

.dcn-contacto__item:last-child {
	border-bottom: 1px solid var(--dcn-color-borde);
}

/*
 * Rotulo de canal: icono + nombre en una sola linea.
 *
 * flex, NO inline-flex: el rotulo era display:block y ocupaba su propia linea, con
 * el dato debajo. Con inline-flex el valor subia a la misma linea y se perdia la
 * jerarquia —rotulo pequeño arriba, dato grande debajo—, que es justo lo que da
 * peso al numero de WhatsApp. flex conserva ese comportamiento de bloque y ademas
 * alinea el icono. align-items lo centra con la mayuscula del rotulo.
 *
 * El rotulo va en caramelo oscuro: 6,2:1 sobre blanco.
 */
.dcn-contacto__etiqueta {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.25rem;
	color: var(--dcn-caramelo-oscuro);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/*
 * Icono de canal. Verde NICE, el mismo papel que tiene en el boton flotante: marca
 * el canal sin competir con el dato, que es lo que el visitante viene a leer.
 * 5,04:1 sobre blanco, muy por encima del 3:1 que WCAG 1.4.11 pide a un grafico.
 *
 * flex:none y medidas fijas: el icono no se estira ni se deforma aunque el rotulo
 * se quede sin sitio. 14px frente a los 12px del rotulo, de modo que se lee como
 * marca del canal y no como decoracion suelta.
 */
.dcn-contacto__icono {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	fill: var(--dcn-color-acento);
}

.dcn-contacto__enlace {
	color: var(--dcn-color-texto);
	/* Un correo largo nunca debe desbordar en movil. */
	overflow-wrap: break-word;
	transition: color var(--dcn-transicion);
}

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

/*
 * <address> es correcto aqui: son los datos de contacto de la organizacion.
 * base.css ya lo pone en redonda; no se fuerza cursiva.
 */
.dcn-contacto__direccion {
	margin-bottom: 0;
	line-height: 1.5;
}

/*
 * Boton flotante de WhatsApp — discreto y no invasivo (Maestro §18).
 *
 * Movil primero: circulo con el logotipo. La pildora de texto completo ocupaba mas
 * de la mitad del ancho a 375px y tapaba contenido en cualquier posicion de scroll
 * (pendiente 17). El rotulo no desaparece del arbol de accesibilidad y vuelve a
 * verse a partir de 64em: a 768px la pildora, medida en el temporal en 220x49,
 * seguia tapando texto en Elaboracion y Contacto.
 */

.dcn-whatsapp {
	position: fixed;
	/* Reserva simple para navegadores sin max()/env(). */
	right: var(--dcn-espacio-s);
	bottom: var(--dcn-espacio-s);
	/*
	 * Separacion lateral igual a la del contenedor, mas la zona segura del
	 * dispositivo cuando existe. Si la pantalla es mas ancha que el contenedor, el
	 * boton se alinea con su borde exterior en lugar de pegarse al del viewport,
	 * que es lo que se veia desalineado con el contenido centrado.
	 */
	right: max(
		calc(clamp(1rem, 0.5rem + 2vw, 2rem) + env(safe-area-inset-right, 0px)),
		calc((100% - var(--dcn-ancho-contenedor)) / 2)
	);
	bottom: calc(var(--dcn-espacio-s) + env(safe-area-inset-bottom, 0px));
	z-index: 50;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dcn-espacio-xs);
	width: var(--dcn-alto-flotante);
	height: var(--dcn-alto-flotante);
	border: 2px solid var(--dcn-color-acento);
	border-radius: 50%;
	background: var(--dcn-color-fondo);
	color: var(--dcn-color-texto);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
}

.dcn-whatsapp__icono {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	fill: var(--dcn-color-acento);
}

/* Mismo ocultamiento visual que .dcn-sr-only, pero solo por debajo de 64em. */
.dcn-whatsapp__texto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dcn-whatsapp:hover,
.dcn-whatsapp:focus-visible {
	text-decoration: underline;
}

@media (min-width: 64em) {

	.dcn-whatsapp {
		width: auto;
		height: auto;
		padding: 0.75rem 1rem;
		border-radius: var(--dcn-radio-m);
	}

	.dcn-whatsapp__icono {
		width: 1.25rem;
		height: 1.25rem;
	}

	.dcn-whatsapp__texto {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
	}
}

/*
 * Marcador de informacion no disponible.
 * Es una ayuda de desarrollo: no debe quedar ninguno en la web publicada.
 */

.dcn-pendiente {
	padding: var(--dcn-espacio-s);
	border: 1px dashed var(--dcn-color-aviso-borde);
	border-radius: var(--dcn-radio);
	background: var(--dcn-color-aviso-fondo);
	color: var(--dcn-color-aviso-texto);
	font-size: 0.875rem;
	overflow-wrap: break-word;
}