.elementor-kit-7{--e-global-color-primary:#5E7B39;--e-global-color-secondary:#B0603C;--e-global-color-text:#3E332C;--e-global-color-accent:#3C4F24;--e-global-color-63ebf2f:#FFFDF6;--e-global-color-1586fd3:#FAF4EB;--e-global-color-3c5eeb5:#F7F7ED;--e-global-color-8876194:#FFFFFF;--e-global-color-a1ed974:#DED8BA;--e-global-color-af36be9:#9FAE8B;--e-global-color-6872df1:#BE8B42;--e-global-color-7857c45:#C79A87;--e-global-color-930b79d:#735E59;--e-global-color-c819992:#ECEDDF;--e-global-color-48cab80:#F6EAE0;--e-global-color-ef7b39b:#F7EFE0;--e-global-color-a96d601:#F8F1E9;--e-global-typography-primary-font-family:"Comfortaa";--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"Comfortaa";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Sinkin Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Sinkin Sans";--e-global-typography-accent-font-weight:600;--e-global-typography-6846017-font-family:"Sinkin Sans";--e-global-typography-6846017-font-size:12px;--e-global-typography-6846017-font-weight:400;color:var( --e-global-color-text );font-family:"Sinkin Sans", Sans-serif;font-size:18px;font-weight:400;line-height:1.65em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Sinkin Sans", Sans-serif;font-size:16px;font-weight:600;text-transform:none;line-height:1em;letter-spacing:0.2px;color:var( --e-global-color-8876194 );border-style:groove;border-width:1px 1px 1px 1px;border-color:#5E7B3985;border-radius:50px 50px 50px 50px;padding:16px 34px 16px 34px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-8876194 );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 p{margin-block-end:16px;}.elementor-kit-7 a{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-kit-7 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-7 h1{color:var( --e-global-color-accent );font-family:"Comfortaa", Sans-serif;font-size:52px;font-weight:300;line-height:1.12em;}.elementor-kit-7 h2{color:var( --e-global-color-accent );font-family:"Comfortaa", Sans-serif;font-size:38px;font-weight:600;line-height:1.18em;}.elementor-kit-7 h3{color:var( --e-global-color-accent );font-family:"Comfortaa", Sans-serif;font-size:26px;font-weight:400;line-height:1.28em;}.elementor-kit-7 h4{color:var( --e-global-color-text );font-family:"Sinkin Sans", Sans-serif;font-size:19px;font-weight:600;line-height:1.35em;}.elementor-kit-7 h5{color:var( --e-global-color-text );font-family:"Sinkin Sans", Sans-serif;font-size:17px;font-weight:600;line-height:1.4em;}.elementor-kit-7 h6{color:var( --e-global-color-primary );font-family:"Sinkin Sans", Sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;line-height:1.4em;letter-spacing:1.7px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{font-size:17px;}.elementor-kit-7 h1{font-size:42px;}.elementor-kit-7 h2{font-size:32px;}.elementor-kit-7 h3{font-size:23px;}.elementor-kit-7 h4{font-size:18px;}.elementor-kit-7 h5{font-size:16px;}.elementor-kit-7 h6{font-size:12px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{font-size:17px;}.elementor-kit-7 h1{font-size:34px;}.elementor-kit-7 h2{font-size:26px;}.elementor-kit-7 h3{font-size:21px;}.elementor-kit-7 h4{font-size:18px;}.elementor-kit-7 h5{font-size:16px;}.elementor-kit-7 h6{font-size:12px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-size:15px;padding:14px 26px 14px 26px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* que los anclajes no queden debajo de la cabecera */
html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: 110px; }

/* ============================================================
   SECCIÓN 02 · Barra de confianza
   Elementor → Ajustes del sitio → CSS personalizado
   Sin hexadecimales: todo sale de los colores globales.
   ============================================================ */

.nt-confianza{ width: 100%; }

.nt-confianza-card{
	background: var(--e-global-color-8876194);          /* blanco */
	border-radius: 44px;
	box-shadow: -17px 17px 34px rgba(20, 28, 12, .16);
	padding: 20px 24px;
	display: grid;
	gap: 18px;
}

@media (min-width: 720px){
	.nt-confianza-card{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 32px;
		padding: 22px 30px;
	}
}

@media (min-width: 1040px){
	.nt-confianza-card{
		grid-template-columns: repeat(4, 1fr);
		padding: 20px 34px;
		gap: 0;
	}
	.nt-confianza-card .nt-dato{ padding: 4px 26px; }
	.nt-confianza-card .nt-dato:first-child{ padding-left: 0; }
	.nt-confianza-card .nt-dato:last-child{ padding-right: 0; }
	.nt-confianza-card .nt-dato + .nt-dato{
		border-left: 1px solid var(--e-global-color-a1ed974);   /* crema */
	}
}

/* cada dato es un enlace a su sección */
.nt-dato{
	display: flex;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	border-radius: 16px;
	transition: transform .25s ease;
}
.nt-dato:hover,
.nt-dato:focus-visible{ transform: translateY(-2px); text-decoration: none; }
.nt-dato:focus-visible{
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 4px;
}

.nt-dato-ico{
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--e-global-color-c819992);   /* tinte olivo */
	color: var(--e-global-color-accent);         /* olivo profundo */
	transition: background-color .25s ease, color .25s ease;
}
.nt-dato-ico svg{ width: 19px; height: 19px; }

.nt-dato:hover .nt-dato-ico{
	background: var(--e-global-color-primary);   /* olivo */
	color: var(--e-global-color-8876194);        /* blanco */
}

.nt-dato-txt{ display: block; }
.nt-dato-txt b{
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	color: var(--e-global-color-text);
	margin-bottom: 1px;
}
.nt-dato-txt > span{
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--e-global-color-930b79d);        /* café topo */
}
.nt-dato:hover .nt-dato-txt b{ color: var(--e-global-color-accent); }

.nt-cifras{ font-variant-numeric: tabular-nums; }

/* ============================================================
   SECCIÓN 03 · En qué te podemos acompañar
   Elementor → Ajustes del sitio → CSS personalizado
   Tarjetas de doble cara con foto. Sin JavaScript.
   ============================================================ */

.nt-rutas-sec{ width: 100%; }

/* ---------- entrada ---------- */
/* el título y las dos voces siguen a la izquierda y con su ancho de lectura */
.nt-rutas-intro{ margin: 0 0 44px; }
.nt-rutas-intro h2{ max-width: 56ch; margin: 0 0 20px; }
.nt-voz{
	max-width: 56ch;
	font-style: italic; font-size: 17px; line-height: 1.55;
	color: var(--e-global-color-930b79d); margin: 0 0 8px;
}

/* la frase de cierre NO es una voz más: es la respuesta.
   Por eso rompe la columna, se centra y sube de tamaño. */
.nt-rutas-cierre{
	max-width: 42ch;
	margin: 36px auto 0;
	text-align: center;
	text-wrap: balance;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 21px;
	line-height: 1.38;
	letter-spacing: .002em;
	color: var(--e-global-color-accent);      /* olivo profundo, como los títulos */
}
@media (min-width: 760px){ .nt-rutas-cierre{ font-size: 26px; margin-top: 42px; } }

/* ---------- rejilla ---------- */
.nt-rutas{ display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .nt-rutas{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px){ .nt-rutas{ grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* ---------- caras ---------- */
.nt-ruta-cara{
	border-radius: 44px;
	overflow: hidden;
	position: relative;
}

/* FRENTE: foto a sangre con velo olivo y el título encima */
.nt-ruta-frente img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nt-ruta-frente::after{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(
		180deg,
		rgba(60, 79, 36, 0)   30%,
		rgba(60, 79, 36, .55) 62%,
		rgba(60, 79, 36, .92) 100%
	);
}
.nt-ruta-frente h3{
	position: absolute;
	left: 26px; right: 26px; bottom: 24px;
	z-index: 1;
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	color: var(--e-global-color-63ebf2f);   /* hueso */
}

/* DORSO */
.nt-ruta-dorso{
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}
.nt-ruta-dorso p{
	margin: 0; font-size: 15px; line-height: 1.5;
	color: var(--e-global-color-text);
}
.nt-ruta-dorso a{
	align-self: flex-start;
	font-weight: 600; font-size: 14px;
	color: var(--e-global-color-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.nt-ruta-dorso a:hover{ color: var(--e-global-color-secondary); }

/* ---------- móvil y tablet: sin giro, todo visible ---------- */
@media (max-width: 1039px){
	.nt-ruta-frente{ border-radius: 44px 44px 0 0; height: 220px; }
	.nt-ruta-dorso{ border-radius: 0 0 44px 44px; justify-content: flex-start; }
}

/* ---------- escritorio: doble cara ---------- */
@media (min-width: 1040px){
	.nt-ruta{ perspective: 1400px; }
	.nt-ruta-in{
		position: relative;
		height: 330px;
		transform-style: preserve-3d;
		transition: transform .6s cubic-bezier(.4,.2,.2,1);
	}
	.nt-ruta:hover .nt-ruta-in,
	.nt-ruta:focus-within .nt-ruta-in{ transform: rotateY(180deg); }

	.nt-ruta-cara{
		position: absolute; inset: 0;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
	.nt-ruta-dorso{ transform: rotateY(180deg); }
}

/* ---------- familias de color, sólo en el dorso ----------
   Verde  = metabólico y hormonal clínico
   Barro  = deportivo y composición corporal
   Arcilla= los dos temas más sensibles
   Salvia = digestivo   ·   Ocre = prevención
--------------------------------------------------------- */
.nt-ruta--olivo   .nt-ruta-dorso{ background: var(--e-global-color-c819992); }
.nt-ruta--barro   .nt-ruta-dorso{ background: var(--e-global-color-48cab80); }
.nt-ruta--ocre    .nt-ruta-dorso{ background: var(--e-global-color-ef7b39b); }
.nt-ruta--arcilla .nt-ruta-dorso{ background: var(--e-global-color-a96d601); }
.nt-ruta--salvia  .nt-ruta-dorso{ background: var(--e-global-color-3c5eeb5); }

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
	.nt-ruta-in{ transition: none; }
}


/* ============================================================
   SECCIÓN 04 · Una nutrición que sí cabe en tu vida
   Elementor → Ajustes del sitio → CSS personalizado
   Es el momento cálido de la página: mandan los terrosos.
   Las palabras del texto flotan alrededor de la promesa.
   ============================================================ */

.nt-vida{ width: 100%; }

.nt-vida-grid{ display: grid; gap: 44px; align-items: center; }
@media (min-width: 980px){
	.nt-vida-grid{ grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* ---------- columna de texto ---------- */
.nt-vida-texto h2{
	margin: 0 0 22px;
	max-width: 18ch;
	color: var(--e-global-color-secondary);      /* barro: el título entra en cálido */
}
.nt-vida-texto p{
	margin: 0 0 16px;
	color: var(--e-global-color-930b79d);        /* café topo */
	max-width: 54ch;
}
.nt-vida-texto p:last-child{ margin-bottom: 0; }

/* ---------- la órbita ---------- */
.nt-vida-orbita{
	position: relative;
	display: grid;
	place-items: center;
	min-height: 460px;
	padding: 30px 0;
}

/* la promesa, al centro, en barro y en CÍRCULO.
   El texto se limita al 70% del diámetro: dentro de un círculo
   las esquinas no existen, así que hay que dejarle aire. */
.nt-vida-cita{
	position: relative;
	z-index: 2;
	margin: 0;
	width: min(340px, 82vw);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--e-global-color-secondary);          /* barro */
	border-radius: 50%;
	box-shadow: -17px 17px 40px rgba(90, 45, 20, .26);
	text-align: center;
}
.nt-vida-cita p{
	max-width: 78%;
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-weight: 300;
	font-size: 22px;
	line-height: 1.3;
	color: var(--e-global-color-63ebf2f);                  /* hueso — 4.50:1 */
}

/* ---------- pastillas ----------
   Alternan tono saturado y tinte, para que haya color de verdad
   y no una sola nota. El texto de cada una usa el color que
   sí contrasta contra su fondo.
--------------------------------- */
.nt-pastilla{
	position: absolute;
	z-index: 1;
	white-space: nowrap;
	border-radius: 999px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: -6px 8px 18px rgba(90, 45, 20, .14);
	animation: nt-flotar 7s ease-in-out infinite;
}

/* saturadas, texto claro */
.nt-pastilla--1{                                   /* el trabajo */
	top: 3%; left: 0;
	background: var(--e-global-color-6872df1);     /* ocre */
	color: var(--e-global-color-text);             /* 4.06:1 */
	animation-delay: 0s;
}
.nt-pastilla--3{                                   /* los horarios */
	top: 44%; left: -13%;
	background: var(--e-global-color-7857c45);     /* arcilla */
	color: var(--e-global-color-text);             /* 4.90:1 */
	animation-delay: -2.3s;
}
.nt-pastilla--5{                                   /* los antojos */
	bottom: 2%; left: 6%;
	background: var(--e-global-color-af36be9);     /* salvia */
	color: var(--e-global-color-text);             /* 5.19:1 */
	animation-delay: -4.6s;
}

/* tintes, texto oscuro */
.nt-pastilla--2{                                   /* la familia */
	top: 15%; right: -2%;
	background: var(--e-global-color-48cab80);     /* tinte barro */
	color: var(--e-global-color-text);
	animation-delay: -1.1s;
}
.nt-pastilla--4{                                   /* los viajes */
	bottom: 22%; right: -4%;
	background: var(--e-global-color-ef7b39b);     /* tinte ocre */
	color: var(--e-global-color-text);
	animation-delay: -3.4s;
}
.nt-pastilla--6{                                   /* los días que no salen */
	bottom: -3%; right: 10%;
	background: var(--e-global-color-a96d601);     /* tinte arcilla */
	color: var(--e-global-color-text);
	animation-delay: -5.7s;
}

@keyframes nt-flotar{
	0%, 100%{ transform: translateY(0); }
	50%     { transform: translateY(-11px); }
}

/* dos halos cálidos cruzados, sensación de equilibrio */
.nt-vida-orbita::before,
.nt-vida-orbita::after{
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}
.nt-vida-orbita::before{
	width: 400px; height: 400px;
	background: var(--e-global-color-a96d601);     /* tinte arcilla */
	transform: translate(-38px, -26px);
}
.nt-vida-orbita::after{
	width: 300px; height: 300px;
	background: var(--e-global-color-ef7b39b);     /* tinte ocre */
	transform: translate(58px, 60px);
	opacity: .85;
}

/* ---------- celular ---------- */
@media (max-width: 719px){
	.nt-vida-orbita{ min-height: 0; display: block; padding: 0; }
	.nt-vida-orbita::before,
	.nt-vida-orbita::after{ display: none; }
	.nt-pastilla{
		position: static;
		display: inline-block;
		margin: 0 6px 8px 0;
		animation: none;
	}
	.nt-vida-cita{ margin: 24px auto 0; width: min(300px, 84vw); }
	.nt-vida-cita p{ font-size: 19px; }
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
	.nt-pastilla{ animation: none; }
}




/* ============================================================
   SECCIÓN 05 · Cómo trabajamos
   Elementor → Ajustes del sitio → CSS personalizado
   Panel de color, foto girada que sigue girando al hacer scroll
   y números que toman el color de su punto en la línea.
   ============================================================ */

.nt-metodo{ width: 100%; }

/* ---------- panel de color que sostiene todo ---------- */
.nt-metodo-grid{
	display: grid;
	gap: 40px;
	background: var(--e-global-color-1586fd3);      /* arena */
	border-radius: 44px;
	padding: 44px 28px;
	position: relative;
	overflow: hidden;
}
@media (min-width: 900px){
	.nt-metodo-grid{
		grid-template-columns: .8fr 1.2fr;
		gap: 60px;
		padding: 64px 56px;
		align-items: start;
	}
}

/* plasta de color en la esquina del panel */
.nt-metodo-grid::after{
	content: "";
	position: absolute;
	width: 300px; height: 300px;
	border-radius: 50%;
	background: var(--e-global-color-ef7b39b);      /* tinte ocre */
	right: -110px; bottom: -130px;
	z-index: 0;
}
.nt-metodo-foto,
.nt-metodo-cuerpo{ position: relative; z-index: 1; }

/* ---------- la foto, girada ---------- */
.nt-metodo-foto{
	margin: 0;
	position: relative;
}

/* bloque de color detrás, girado al otro lado */
.nt-metodo-foto::before{
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	border-radius: 44px;
	background: var(--e-global-color-secondary);    /* barro */
	transform: rotate(4deg);
	z-index: 0;
}
.nt-metodo-foto img{
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 44px;
	box-shadow: -14px 16px 34px rgba(20, 28, 12, .20);
	transform: rotate(-3deg);
}

/* gira un poco más conforme avanza el scroll.
   Donde el navegador no lo soporta, se queda con el giro fijo. */
@supports (animation-timeline: view()){
	.nt-metodo-foto img{
		animation: nt-girar linear both;
		animation-timeline: view();
		animation-range: entry 10% exit 90%;
	}
	.nt-metodo-foto::before{
		animation: nt-girar-atras linear both;
		animation-timeline: view();
		animation-range: entry 10% exit 90%;
	}
}
@keyframes nt-girar{
	from{ transform: rotate(-4.5deg); }
	to  { transform: rotate(1.5deg);  }
}
@keyframes nt-girar-atras{
	from{ transform: rotate(5.5deg); }
	to  { transform: rotate(1deg);   }
}

@media (min-width: 900px){
	.nt-metodo-foto{ position: sticky; top: 120px; }
}

/* ---------- intro ---------- */
.nt-metodo-intro{ margin: 0 0 30px; }
.nt-metodo-intro h2{ margin: 0 0 10px; }
.nt-metodo-intro p{ margin: 0; color: var(--e-global-color-930b79d); }

/* ---------- los pasos, compactos ---------- */
.nt-pasos{
	list-style: none;
	margin: 0; padding: 0;
	position: relative;
	display: grid;
	gap: 16px;
}
.nt-pasos::before{
	content: "";
	position: absolute;
	left: 23px; top: 38px; bottom: 38px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(
		180deg,
		var(--e-global-color-a1ed974) 0%,
		var(--e-global-color-af36be9) 38%,
		var(--e-global-color-primary) 72%,
		var(--e-global-color-accent) 100%
	);
	z-index: 0;
}

.nt-paso{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 16px;
	align-items: start;
}

/* el número toma el color de su punto en la línea */
.nt-paso-n{
	width: 48px; height: 48px;
	border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-weight: 600;
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	transition: transform .3s ease;
}
.nt-paso:nth-child(1) .nt-paso-n{ background: var(--e-global-color-a1ed974); color: var(--e-global-color-text); }
.nt-paso:nth-child(2) .nt-paso-n{ background: var(--e-global-color-af36be9); color: var(--e-global-color-text); }
.nt-paso:nth-child(3) .nt-paso-n{ background: var(--e-global-color-primary); color: var(--e-global-color-8876194); }
.nt-paso:nth-child(4) .nt-paso-n{ background: var(--e-global-color-accent);  color: var(--e-global-color-8876194); }

.nt-paso:hover .nt-paso-n{ transform: scale(1.08); }

.nt-paso-cuerpo{ padding-top: 3px; }
.nt-paso-cuerpo h3{
	margin: 0 0 3px;
	font-size: 18px;
	line-height: 1.25;
	color: var(--e-global-color-accent);
}
.nt-paso-cuerpo p{
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--e-global-color-930b79d);
	max-width: 44ch;
}

/* ---------- cierre ---------- */
.nt-metodo-cierre{
	margin: 30px 0 0 64px;
	max-width: 44ch;
	padding-left: 20px;
	border-left: 3px solid var(--e-global-color-secondary);   /* barro */
	font-size: 18px;
	line-height: 1.5;
	color: var(--e-global-color-accent);
}
@media (max-width: 899px){ .nt-metodo-cierre{ margin-left: 0; } }

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
	.nt-metodo-foto img,
	.nt-metodo-foto::before{ animation: none; }
	.nt-paso-n{ transition: none; }
	.nt-paso:hover .nt-paso-n{ transform: none; }
	.nt-metodo-foto{ position: static; }
}

/* ============================================================
   SECCIÓN 06 · Modalidades
   Elementor → Ajustes del sitio → CSS personalizado
   Dos tarjetas: la presencial en claro con sus mapas, la de
   línea en olivo. Mapas embebidos, con carga diferida.
   ============================================================ */

.nt-modalidades{ width: 100%; position: relative; }

.nt-mod-intro{ margin: 0 0 44px; text-align: center; }
.nt-mod-intro h2{ margin: 0; }

/* ---------- rejilla ---------- */
.nt-mod-grid{ display: grid; gap: 20px; }
@media (min-width: 980px){
	.nt-mod-grid{ grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: stretch; }
}

.nt-mod-card{
	border-radius: 44px;
	padding: 34px 30px;
	position: relative;
	overflow: hidden;
}
@media (min-width: 980px){ .nt-mod-card{ padding: 40px 38px; } }

.nt-mod-etiqueta{
	margin: 0 0 12px;
	font-size: 12px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
}
.nt-mod-texto{ margin: 0 0 26px; font-size: 16px; line-height: 1.6; }

/* ---------- presencial ---------- */
.nt-mod-card--presencial{
	background: var(--e-global-color-8876194);            /* blanco */
	box-shadow: -17px 17px 40px rgba(20, 28, 12, .12);
}
.nt-mod-card--presencial .nt-mod-etiqueta{ color: var(--e-global-color-primary); }
.nt-mod-card--presencial .nt-mod-texto{ color: var(--e-global-color-930b79d); }

.nt-consultorios{ display: grid; gap: 26px; }
@media (min-width: 640px){ .nt-consultorios{ grid-template-columns: 1fr 1fr; gap: 24px; } }

.nt-mapa{
	border-radius: 30px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--e-global-color-c819992);
	margin-bottom: 14px;
}
.nt-mapa iframe{ width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }

.nt-consultorio h3{
	margin: 0 0 4px;
	font-size: 18px;
	color: var(--e-global-color-accent);
}
.nt-consultorio p{
	margin: 0 0 10px;
	font-size: 14px; line-height: 1.5;
	color: var(--e-global-color-930b79d);
}
.nt-mapa-link{
	font-size: 14px; font-weight: 600;
	color: var(--e-global-color-secondary);              /* barro */
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.nt-mapa-link:hover{ color: var(--e-global-color-accent); }

/* ---------- en línea ---------- */
/* Girada igual que la foto de Ilse, para que las dos piezas
   de la página compartan el mismo gesto. */
.nt-mod-card--linea{
	background: var(--e-global-color-accent);            /* olivo profundo */
	display: flex; flex-direction: column;
	justify-content: center;
	box-shadow: -17px 17px 40px rgba(20, 28, 12, .24);
	transform: rotate(2.5deg);
	transition: transform .4s cubic-bezier(.4,.2,.2,1);
}
.nt-mod-card--linea:hover{ transform: rotate(0deg); }

@media (max-width: 979px){
	/* en columna, el giro estorba menos si es más leve */
	.nt-mod-card--linea{ transform: rotate(1.5deg); }
}
.nt-mod-card--linea::after{
	content: "";
	position: absolute;
	width: 240px; height: 240px; border-radius: 50%;
	background: var(--e-global-color-primary);
	opacity: .5;
	right: -90px; top: -90px;
}
.nt-mod-card--linea > *{ position: relative; z-index: 1; }
.nt-mod-card--linea .nt-mod-etiqueta{ color: var(--e-global-color-a1ed974); }
.nt-mod-card--linea .nt-mod-texto{ color: var(--e-global-color-63ebf2f); margin-bottom: 30px; }

.nt-mod-boton{
	align-self: flex-start;
	background: var(--e-global-color-a1ed974);           /* crema */
	color: var(--e-global-color-accent);
	font-weight: 600; font-size: 15px;
	padding: 14px 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .3s ease, transform .2s ease;
}
.nt-mod-boton:hover{
	background: var(--e-global-color-63ebf2f);
	color: var(--e-global-color-accent);
	transform: translateY(-2px);
}

/* ---------- qué incluye ---------- */
.nt-incluye{
	margin-top: 22px;
	background: var(--e-global-color-1586fd3);           /* arena */
	border-radius: 44px;
	padding: 34px 30px;
	position: relative;
	overflow: hidden;
}
@media (min-width: 980px){ .nt-incluye{ padding: 40px 44px; } }

.nt-incluye::after{
	content: "";
	position: absolute;
	width: 260px; height: 260px; border-radius: 50%;
	background: var(--e-global-color-a96d601);           /* tinte arcilla */
	left: -120px; bottom: -140px;
}
.nt-incluye > *{ position: relative; z-index: 1; }

.nt-incluye h3{ margin: 0 0 20px; font-size: 20px; color: var(--e-global-color-accent); }

.nt-incluye-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px){
	.nt-incluye-lista{ grid-template-columns: 1fr 1fr; gap: 12px 34px; }
}
.nt-incluye-lista li{
	position: relative;
	padding-left: 32px;
	font-size: 16px; line-height: 1.5;
	color: var(--e-global-color-text);
}
.nt-incluye-lista li::before{
	content: "";
	position: absolute; left: 0; top: 2px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--e-global-color-primary);
}
.nt-incluye-lista li::after{
	content: "";
	position: absolute; left: 6px; top: 8px;
	width: 8px; height: 4px;
	border-left: 2px solid var(--e-global-color-8876194);
	border-bottom: 2px solid var(--e-global-color-8876194);
	transform: rotate(-45deg);
}

/* la nota de los paquetes ocupa todo el recuadro, separada por una línea */
.nt-incluye-nota{
	margin: 28px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--e-global-color-a1ed974);   /* crema */
	font-size: 16px; line-height: 1.55;
	color: var(--e-global-color-930b79d);
}

@media (prefers-reduced-motion: reduce){
	.nt-mod-boton,
	.nt-mod-card--linea{ transition: none; }
	.nt-mod-boton:hover{ transform: none; }
}


/* ============================================================
   SECCIÓN 07 · Quiénes somos
   Elementor → Ajustes del sitio → CSS personalizado

   Composición simétrica sobre un eje central. Las dos al mismo
   nivel y del mismo tamaño: ninguna es la principal. Los retratos
   miran hacia adentro, hacia el signo que las une.
   ============================================================ */

.nt-nosotras{ width: 100%; }

/* ---------- entrada, centrada sobre el mismo eje ---------- */
.nt-nos-intro{
	max-width: 68ch;
	margin: 0 auto 104px;
	text-align: center;
}
.nt-nos-intro h2{ margin: 0 0 18px; }
.nt-nos-intro p{ margin: 0; color: var(--e-global-color-930b79d); }

/* ---------- la pareja ---------- */
.nt-perfiles{
	display: grid;
	gap: 84px;
	align-items: stretch;          /* misma altura las dos */
}
@media (min-width: 900px){
	.nt-perfiles{ grid-template-columns: 1fr 72px 1fr; gap: 0; }
}

/* el signo que las une, sobre el eje */
.nt-union{
	display: grid;
	place-items: center;
	align-self: center;
	justify-self: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--e-global-color-63ebf2f);
	border: 2px solid var(--e-global-color-a1ed974);
	position: relative; z-index: 3;
}
.nt-union span{
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-weight: 600; font-size: 24px; line-height: 1;
	color: var(--e-global-color-primary);
}
@media (max-width: 899px){ .nt-union{ display: none; } }

/* ---------- cada panel: mismo nivel, mismo peso ---------- */
.nt-perfil{
	position: relative;
	border-radius: 44px;
	padding: 96px 32px 34px;
	display: flex;
	flex-direction: column;
}
@media (min-width: 900px){
	.nt-perfil{ padding: 104px 40px 40px; }
	/* inclinación simétrica: se recargan una hacia la otra */
	.nt-perfil--claudia{ transform: rotate(-1.2deg); }
	.nt-perfil--ilse{    transform: rotate( 1.2deg); }
}

.nt-perfil--claudia{
	background: var(--e-global-color-c819992);       /* tinte olivo */
	box-shadow: -14px 16px 36px rgba(20, 28, 12, .13);
}
.nt-perfil--ilse{
	background: var(--e-global-color-48cab80);       /* tinte barro */
	box-shadow: 14px 16px 36px rgba(90, 45, 20, .13);
}

/* ---------- retratos mirando hacia el centro ---------- */
.nt-retrato{
	margin: 0;
	position: absolute;
	top: -54px;
	width: 136px;
}
@media (min-width: 900px){ .nt-retrato{ width: 150px; top: -60px; } }

/* Claudia lo lleva a su derecha, Ilse a su izquierda */
.nt-perfil--claudia .nt-retrato{ right: 40px; }
.nt-perfil--ilse    .nt-retrato{ left: 40px;  }
@media (max-width: 899px){
	.nt-perfil--claudia .nt-retrato,
	.nt-perfil--ilse .nt-retrato{ left: 32px; right: auto; }
}

.nt-retrato img{
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 50%;
	border: 6px solid var(--e-global-color-63ebf2f);
}
.nt-retrato::before{
	content: "";
	position: absolute; inset: -7px;
	border-radius: 50%;
	z-index: -1;
}
.nt-perfil--claudia .nt-retrato::before{ background: var(--e-global-color-primary);   }
.nt-perfil--ilse    .nt-retrato::before{ background: var(--e-global-color-secondary); }
.nt-perfil--claudia .nt-retrato img{ box-shadow: -8px 10px 22px rgba(20,28,12,.22); }
.nt-perfil--ilse    .nt-retrato img{ box-shadow:  8px 10px 22px rgba(90,45,20,.22); }

/* ---------- datos ---------- */
.nt-perfil h3{
	margin: 0 0 4px;
	font-size: 26px;
	color: var(--e-global-color-accent);
}
.nt-perfil-rol{
	margin: 0 0 4px;
	font-size: 15px; font-weight: 600;
	color: var(--e-global-color-930b79d);
	min-height: 2.6em;                /* alinea las cédulas de las dos */
}
.nt-perfil-ced{
	margin: 0 0 24px;
	font-size: 13.5px;
	color: var(--e-global-color-930b79d);
	font-variant-numeric: tabular-nums;
}

.nt-perfil-eje{
	margin: 0 0 14px;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.25;
	min-height: 2.5em;                /* los dos ejes a la misma altura */
}
.nt-perfil--claudia .nt-perfil-eje{ color: var(--e-global-color-primary);   }
.nt-perfil--ilse    .nt-perfil-eje{ color: var(--e-global-color-secondary); }

.nt-areas{
	list-style: none; margin: 0 0 22px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 7px;
	flex-grow: 1;                     /* empuja el desplegable al fondo */
	align-content: flex-start;
}
.nt-areas li{
	background: var(--e-global-color-63ebf2f);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12.5px; font-weight: 600;
	color: var(--e-global-color-text);
	height: fit-content;
}

/* ---------- formación retráctil, sin JavaScript ---------- */
.nt-plegable{ border-top: 1px solid rgba(60,79,36,.14); padding-top: 16px; margin-top: auto; }
.nt-plegable summary{
	list-style: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14.5px; font-weight: 600;
	color: var(--e-global-color-accent);
}
.nt-plegable summary::-webkit-details-marker{ display: none; }
.nt-plegable summary::after{
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .3s ease;
}
.nt-plegable[open] summary::after{ transform: rotate(-135deg) translateY(-2px); }
.nt-plegable summary:focus-visible{
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 4px; border-radius: 4px;
}
.nt-plegable-cuerpo{ padding-top: 14px; }
.nt-plegable-cuerpo p{
	margin: 0 0 12px;
	font-size: 14.5px; line-height: 1.6;
	color: var(--e-global-color-930b79d);
}
.nt-plegable-cuerpo p:last-child{ margin-bottom: 0; }
.nt-plegable-cuerpo strong{ color: var(--e-global-color-text); }

/* ---------- cierre, sobre el mismo eje ---------- */
.nt-nos-cierre{
	margin-top: 88px;
	display: flex; flex-direction: column;
	align-items: center; gap: 22px;
	text-align: center;
}
@media (max-width: 899px){ .nt-nos-cierre{ margin-top: 56px; } }

.nt-nos-cierre-txt{
	margin: 0;
	max-width: 42ch;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 1.35;
	color: var(--e-global-color-accent);
}
.nt-nos-cierre-txt strong{ font-weight: 400; color: var(--e-global-color-secondary); }

.nt-nos-boton{
	display: inline-block;
	background: var(--e-global-color-primary);
     color: var(--e-global-color-8876194);           /* hueso — 4.50:1 */
	border: 0px solid var(--e-global-color-secondary);
	font-weight: 600; font-size: 15px;
	padding: 13px 32px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: -6px 8px 20px rgba(90, 45, 20, .22);
	transition: background-color .3s ease, color .3s ease,
	            border-color .3s ease, transform .2s ease;
}
.nt-nos-boton:hover{
	background: var(--e-global-color-a1ed974);
	color: var(--e-global-color-secondary);
	transform: translateY(-2px);
}

/* ---- ALTERNATIVAS ----
   Si prefieres otra, cambia sólo las dos líneas de color.

   Olivo con blanco (igual que el resto del sitio):
     background: var(--e-global-color-primary);
     color: var(--e-global-color-8876194);

   Crema con olivo profundo (el más suave):
     background: var(--e-global-color-a1ed974);
     color: var(--e-global-color-accent);
------------------------- */

@media (prefers-reduced-motion: reduce){
	.nt-plegable summary::after,
	.nt-nos-boton{ transition: none; }
	.nt-nos-boton:hover{ transform: none; }
}

/* ============================================================
   SECCIÓN 08 · Tu Nutrición es integral
   Elementor → Ajustes del sitio → CSS personalizado

   La franja está partida en dos: el texto ocupa su mitad y la
   foto ocupa la otra COMPLETA — de arriba abajo y hasta el
   borde derecho. No va encima del recuadro: es media pieza del
   recuadro. Por eso el aire interior vive en el texto, no en la
   franja. Sin JavaScript.
   ============================================================ */

.nt-red{
	width: 100%;
	position: relative;
	background: var(--e-global-color-accent);        /* olivo profundo */
	border-radius: 44px;
	overflow: hidden;                                 /* la esquina redondea la foto */
	padding: 0;                                       /* el aire lo pone el texto */
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 900px){
	.nt-red{ grid-template-columns: 1.08fr .92fr; align-items: stretch; }
}

/* plasta cálida en la esquina, detrás del texto */
.nt-red::after{
	content: "";
	position: absolute;
	width: 320px; height: 320px; border-radius: 50%;
	background: var(--e-global-color-secondary);     /* barro */
	opacity: .28;
	left: -130px; bottom: -150px;
	z-index: 0;
}

/* ---------- texto ---------- */
.nt-red-texto{
	position: relative;
	z-index: 1;
	padding: 48px 28px;
	align-self: center;
}
@media (min-width: 900px){
	.nt-red-texto{ padding: 72px 56px; }
}
.nt-red-texto h2{
	margin: 0 0 20px;
	color: var(--e-global-color-a1ed974);            /* crema */
	max-width: 16ch;
}
.nt-red-texto p{
	margin: 0;
	color: var(--e-global-color-63ebf2f);            /* hueso */
	max-width: 54ch;
}

/* ---------- la foto: su mitad, completa ---------- */
.nt-red-foto{
	margin: 0;
	position: relative;
	z-index: 1;
	min-height: 100%;
}
.nt-red-foto img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

/* en celular va abajo, también de borde a borde */
@media (max-width: 899px){
	.nt-red-foto img{ aspect-ratio: 4 / 5; height: auto; }
}



/* ============================================================
   SECCIÓN 09 · Opiniones
   Elementor → Ajustes del sitio → CSS personalizado

   Reseñas reales de Avena, citadas con su fuente. Cada tarjeta
   lleva el color de la nutrióloga de quien habla, con una leve
   inclinación alterna para que no se vean alineadas al milímetro.
   ============================================================ */

.nt-opiniones{ width: 100%; }

/* ---------- entrada ---------- */
.nt-op-intro{ max-width: 60ch; margin: 0 auto 52px; text-align: center; }

.nt-op-sello{
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 18px;
	background: var(--e-global-color-1586fd3);       /* arena */
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 14px;
	color: var(--e-global-color-930b79d);
}
.nt-op-sello strong{ color: var(--e-global-color-text); }
.nt-op-estrellas{
	color: var(--e-global-color-6872df1);            /* ocre */
	letter-spacing: 2px;
	font-size: 15px;
}

.nt-op-intro h2{ margin: 0 0 16px; }
.nt-op-texto{ margin: 0; color: var(--e-global-color-930b79d); }

/* ---------- las opiniones ---------- */
.nt-op-lista{
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 700px){ .nt-op-lista{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px){ .nt-op-lista{ grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.nt-op{
	margin: 0;
	border-radius: 36px;
	padding: 30px 26px 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform .3s cubic-bezier(.4,.2,.2,1);
}

/* la comilla, en el color de cada una */
.nt-op::before{
	content: "\201C";
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-size: 62px;
	line-height: .8;
	position: absolute;
	top: 18px; right: 26px;
	opacity: .3;
}

.nt-op p{
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--e-global-color-text);
	position: relative; z-index: 1;
}

.nt-op footer{
	margin-top: auto;
	display: flex; flex-direction: column; gap: 1px;
}
.nt-op-quien{
	font-weight: 600; font-size: 14px;
	color: var(--e-global-color-text);
}
.nt-op-fuente{
	font-size: 12.5px;
	color: var(--e-global-color-930b79d);
}

/* color según de quién hablan */
.nt-op--claudia{ background: var(--e-global-color-c819992); }   /* tinte olivo */
.nt-op--ilse{    background: var(--e-global-color-48cab80); }   /* tinte barro */
.nt-op--claudia::before{ color: var(--e-global-color-primary);   }
.nt-op--ilse::before{    color: var(--e-global-color-secondary); }

/* inclinación alterna, muy leve */
@media (min-width: 1100px){
	.nt-op:nth-child(odd){  transform: rotate(-1deg); }
	.nt-op:nth-child(even){ transform: rotate( 1deg); }
	.nt-op:hover{ transform: rotate(0deg) translateY(-4px); }
}

/* ---------- enlaces a los perfiles ---------- */
.nt-op-vertodas{
	margin: 34px 0 0;
	text-align: center;
	font-size: 15px;
	color: var(--e-global-color-930b79d);
}
.nt-op-vertodas a{
	font-weight: 600;
	color: var(--e-global-color-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.nt-op-vertodas a:hover{ color: var(--e-global-color-secondary); }
.nt-op-vertodas span{ margin: 0 10px; }

@media (prefers-reduced-motion: reduce){
	.nt-op{ transition: none; }
	.nt-op:nth-child(odd), .nt-op:nth-child(even){ transform: none; }
}

/* ============================================================
   SECCIÓN 10 · Preguntas frecuentes
   Elementor → Ajustes del sitio → CSS personalizado
   Acordeón con <details> nativo: sin JavaScript y accesible
   con teclado de fábrica.
   ============================================================ */

.nt-faq{ width: 100%; }

.nt-faq-grid{ display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px){
	.nt-faq-grid{ grid-template-columns: .78fr 1.22fr; gap: 64px; }
}

/* ---------- columna izquierda ---------- */
.nt-faq-lado h2{ margin: 0 0 16px; }
.nt-faq-lado p{
	margin: 0 0 26px;
	color: var(--e-global-color-930b79d);
	max-width: 34ch;
}
@media (min-width: 900px){
	.nt-faq-lado{ position: sticky; top: 130px; }
}

.nt-faq-boton{
	display: inline-block;
	background: var(--e-global-color-primary);
	color: var(--e-global-color-8876194);
	border: 2px solid var(--e-global-color-primary);
	font-weight: 600; font-size: 15px;
	padding: 13px 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease, transform .2s ease;
}
.nt-faq-boton:hover{
	background: var(--e-global-color-accent);
	border-color: var(--e-global-color-accent);
	color: var(--e-global-color-8876194);
	transform: translateY(-2px);
}

/* ---------- el acordeón ---------- */
.nt-faq-lista{ display: grid; gap: 10px; }

.nt-faq-item{
	background: var(--e-global-color-1586fd3);        /* arena */
	border-radius: 26px;
	padding: 4px 26px;
	transition: background-color .3s ease;
}
.nt-faq-item[open]{ background: var(--e-global-color-c819992); }   /* tinte olivo */

.nt-faq-item summary{
	list-style: none;
	cursor: pointer;
	display: flex; align-items: flex-start; gap: 16px;
	padding: 20px 0;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-weight: 600;
	font-size: 16.5px;
	line-height: 1.4;
	color: var(--e-global-color-text);
}
@media (min-width: 900px){ .nt-faq-item summary{ font-size: 17.5px; } }
.nt-faq-item summary::-webkit-details-marker{ display: none; }

/* el signo que abre y cierra */
.nt-faq-item summary::after{
	content: "";
	flex: none;
	margin-left: auto;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: var(--e-global-color-primary);
	position: relative;
	top: 2px;
	transition: background-color .3s ease, transform .3s ease;
	/* la cruz, dibujada con degradados */
	background-image:
		linear-gradient(var(--e-global-color-8876194), var(--e-global-color-8876194)),
		linear-gradient(var(--e-global-color-8876194), var(--e-global-color-8876194));
	background-size: 10px 2px, 2px 10px;
	background-position: center, center;
	background-repeat: no-repeat;
}
.nt-faq-item[open] summary::after{
	background-color: var(--e-global-color-accent);
	transform: rotate(135deg);
}
.nt-faq-item summary:hover{ color: var(--e-global-color-accent); }
.nt-faq-item summary:focus-visible{
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 4px;
	border-radius: 12px;
}

.nt-faq-resp{ padding: 0 40px 22px 0; }
.nt-faq-resp p{
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--e-global-color-930b79d);
	max-width: 62ch;
}

/* ---------- marca de pendiente ---------- */
.nt-pend{
	background: #FBEEDD;
	color: #A85F22;
	border: 1px dashed #E2C39B;
	border-radius: 6px;
	padding: 1px 8px;
	font-size: .86em;
	font-weight: 600;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
	.nt-faq-item, .nt-faq-item summary::after, .nt-faq-boton{ transition: none; }
	.nt-faq-boton:hover{ transform: none; }
}

/* ============================================================
   SECCIÓN 11 · Contacto
   Elementor → Ajustes del sitio → CSS personalizado
   Dos burbujas de conversación, una por nutrióloga. El recurso
   visual es la burbuja con su cola: sólo se usa en esta sección.
   Sin JavaScript.
   ============================================================ */

.nt-contacto{ width: 100%; }

/* ---------- encabezado ---------- */
.nt-cont-cabeza{ text-align: center; max-width: 62ch; margin: 0 auto 46px; }
.nt-cont-cabeza h2{ margin: 0 0 16px; }
.nt-cont-cabeza p{ margin: 0; color: var(--e-global-color-930b79d); }

/* ---------- las dos burbujas ---------- */
.nt-cont-burbujas{
	display: grid;
	gap: 22px;
	align-items: stretch;      /* las dos exactamente igual de altas */
	max-width: 1040px;
	margin: 0 auto;
}
@media (min-width: 860px){
	.nt-cont-burbujas{ grid-template-columns: 1fr 1fr; gap: 28px; }
}

.nt-burbuja{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 34px 30px;
	/* esquinas de burbuja: tres redondas y una recta, la de la cola */
	border-radius: 34px 34px 34px 6px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.nt-burbuja--claudia{ background: var(--e-global-color-c819992); }   /* tinte olivo */
.nt-burbuja--ilse{
	background: var(--e-global-color-48cab80);                        /* tinte barro */
	border-radius: 34px 34px 6px 34px;                                /* espejo */
}

/* la cola, dibujada con un triángulo — hacia afuera en cada una */
.nt-burbuja::after{
	content: "";
	position: absolute;
	bottom: -14px;
	width: 0; height: 0;
	border-style: solid;
}
.nt-burbuja--claudia::after{
	left: 0;
	border-width: 15px 18px 0 0;
	border-color: var(--e-global-color-c819992) transparent transparent transparent;
}
.nt-burbuja--ilse::after{
	right: 0;
	border-width: 15px 0 0 18px;
	border-color: var(--e-global-color-48cab80) transparent transparent transparent;
}

.nt-burbuja:hover{
	transform: translateY(-5px);
	box-shadow: 0 18px 40px rgba(60, 79, 36, .13);
}

/* ---------- contenido de la burbuja ---------- */
.nt-burbuja-eje{
	display: inline-block;
	align-self: flex-start;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.nt-burbuja--claudia .nt-burbuja-eje{
	background: var(--e-global-color-primary);        /* olivo */
	color: var(--e-global-color-8876194);             /* blanco */
}
.nt-burbuja--ilse .nt-burbuja-eje{
	background: var(--e-global-color-secondary);      /* barro */
	color: var(--e-global-color-63ebf2f);             /* hueso */
}

.nt-burbuja h3{
	margin: 0 0 10px;
	font-size: 25px;
	line-height: 1.2;
	color: var(--e-global-color-text);
}
@media (min-width: 860px){ .nt-burbuja h3{ font-size: 28px; } }

.nt-burbuja-areas{
	margin: 0 0 24px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--e-global-color-930b79d);
}

/* ---------- vías de contacto ---------- */
.nt-burbuja-vias{
	margin-top: auto;                 /* pega los enlaces abajo: quedan alineados entre las dos */
	display: grid;
	gap: 9px;
}

.nt-via{
	display: inline-flex;
	align-items: center;
	gap: 11px;
	background: var(--e-global-color-8876194);        /* blanco */
	border-radius: 999px;
	padding: 12px 20px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	color: var(--e-global-color-text);
	word-break: break-word;
	transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.nt-via .nt-ico{ flex: none; width: 19px; height: 19px; }

.nt-burbuja--claudia .nt-via .nt-ico{ color: var(--e-global-color-primary); }
.nt-burbuja--ilse    .nt-via .nt-ico{ color: var(--e-global-color-secondary); }

/* el de WhatsApp es el principal: va relleno */
.nt-burbuja--claudia .nt-via--wa{
	background: var(--e-global-color-primary);
	color: var(--e-global-color-8876194);
}
.nt-burbuja--ilse .nt-via--wa{
	background: var(--e-global-color-secondary);
	color: var(--e-global-color-63ebf2f);
}
/* el icono del relleno y el de hover siguen al texto */
.nt-burbuja .nt-via--wa .nt-ico,
.nt-burbuja .nt-via:hover .nt-ico{ color: currentColor; }

.nt-via:hover{ transform: translateX(3px); }
.nt-burbuja--claudia .nt-via:hover{
	background: var(--e-global-color-accent);
	color: var(--e-global-color-8876194);
}
.nt-burbuja--ilse .nt-via:hover{
	background: var(--e-global-color-secondary);
	color: var(--e-global-color-63ebf2f);
}

.nt-via:focus-visible{
	outline: 2px solid var(--e-global-color-text);
	outline-offset: 3px;
}

/* ---------- la línea de en medio ---------- */
.nt-cont-duda{
	max-width: 54ch;
	margin: 40px auto 0;
	text-align: center;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--e-global-color-930b79d);
}

/* ---------- pie de la sección ---------- */
.nt-cont-pie{
	max-width: 1040px;
	margin: 34px auto 0;
	padding-top: 26px;
	border-top: 1px solid var(--e-global-color-a1ed974);   /* crema */
	text-align: center;
}
.nt-cont-horario{
	margin: 0;
	font-size: 14.5px;
	color: var(--e-global-color-930b79d);
}

@media (prefers-reduced-motion: reduce){
	.nt-burbuja, .nt-via{ transition: none; }
	.nt-burbuja:hover, .nt-via:hover{ transform: none; }
}


/* ============================================================
   SECCIÓN 12 · Cierre
   Elementor → Ajustes del sitio → CSS personalizado
   El único bloque de fondo sólido de la página. Aquí el recurso
   no es un adorno: es el contraste. Un solo botón, sin alternativas.
   Sin JavaScript.
   ============================================================ */

.nt-cierre{ width: 100%; }

/* ---------- la franja ---------- */
/* Va de borde a borde: en Elementor el contenedor de esta sección
   debe ir en Ancho «Completo» y con el padding lateral en 0.       */
.nt-cierre-panel{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 72px 0 64px;
	/* olivo con una caída hacia olivo profundo: da fondo sin ensuciar */
	background-image: linear-gradient(
		152deg,
		var(--e-global-color-primary) 0%,
		var(--e-global-color-primary) 46%,
		var(--e-global-color-accent) 100%
	);
	background-color: var(--e-global-color-primary);   /* respaldo */
}
@media (min-width: 860px){
	.nt-cierre-panel{ padding: 104px 0 92px; }
}

/* textura de papel: retícula de puntos casi invisible */
.nt-cierre-panel::before{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(250, 247, 236, .06) 1px, transparent 1px);
	background-size: 6px 6px;
}

/* El contenido se alinea con el resto del sitio: toma el mismo ancho
   que Elementor usa en todos los contenedores (Ajustes del sitio →
   Diseño → Ancho del contenido). Si lo cambias ahí, esto lo sigue.  */
.nt-cierre-contenido{
	position: relative;
	max-width: var(--container-max-width, 1140px);
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

/* ---------- texto ---------- */
/* hueso sobre olivo = 4.48:1 · el título es grande, así que cumple de sobra */
.nt-cierre-panel h2{
	max-width: 24ch;
	margin: 0 auto 24px;
	color: var(--e-global-color-63ebf2f);            /* hueso */
	font-size: 30px;
	line-height: 1.24;
	text-wrap: balance;
}
@media (min-width: 700px){ .nt-cierre-panel h2{ font-size: 40px; } }
@media (min-width: 1100px){ .nt-cierre-panel h2{ font-size: 46px; } }

.nt-cierre-txt{
	margin: 0 auto 38px;
	max-width: 60ch;
	color: var(--e-global-color-63ebf2f);            /* hueso, no crema: crema aquí no alcanza contraste */
	font-size: 16.5px;
	line-height: 1.68;
}
@media (min-width: 700px){ .nt-cierre-txt{ font-size: 17.5px; } }

/* ---------- el único botón ---------- */
/* crema con tinta = 10.3:1 · es el único elemento claro sólido: por eso jala la vista */
.nt-cierre-boton{
	display: inline-block;
	background: var(--e-global-color-a1ed974);       /* crema */
	color: var(--e-global-color-text);               /* tinta */
	border: 2px solid var(--e-global-color-a1ed974);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .01em;
	padding: 17px 44px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(36, 42, 28, .22);
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.nt-cierre-boton:hover{
	background: var(--e-global-color-8876194);       /* blanco */
	border-color: var(--e-global-color-8876194);
	color: var(--e-global-color-text);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(36, 42, 28, .3);
}
.nt-cierre-boton:focus-visible{
	outline: 3px solid var(--e-global-color-63ebf2f);
	outline-offset: 4px;
}

/* ---------- el slogan ---------- */
/* separado por la única línea de adorno de toda la sección */
.nt-cierre-slogan{
	position: relative;
	margin: 56px 0 0;
	padding-top: 40px;
	color: var(--e-global-color-a1ed974);            /* crema: texto grande, cumple a este tamaño */
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-weight: 300;
	font-size: 21px;
	line-height: 1.45;
	letter-spacing: .005em;
}
@media (min-width: 700px){ .nt-cierre-slogan{ font-size: 27px; } }

.nt-cierre-slogan::before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 54px;
	height: 2px;
	background: var(--e-global-color-a1ed974);       /* crema */
	transform: translateX(-50%);
	opacity: .55;
	transition: width .4s ease;
}
.nt-cierre-panel:hover .nt-cierre-slogan::before{ width: 108px; }

@media (prefers-reduced-motion: reduce){
	.nt-cierre-boton, .nt-cierre-slogan::before{ transition: none; }
	.nt-cierre-boton:hover{ transform: none; }
	.nt-cierre-panel:hover .nt-cierre-slogan::before{ width: 54px; }
}

/* ============================================================
   SECCIÓN 13 · Pie de página  (propuesta v2)
   Elementor → Ajustes del sitio → CSS personalizado
   Sigue en olivo profundo, el mismo tono en que termina el
   degradado del cierre: los dos bloques se leen como uno solo
   y la banda de arriba no queda cortada.
   El contenedor de Elementor debe ir en Ancho «Completo» y con
   el padding en 0 por los cuatro lados.
   ============================================================ */

.nt-pie{
	width: 100%;
	background: var(--e-global-color-accent);        /* olivo profundo */
	padding: 62px 0 26px;
}

/* la única línea que separa el cierre del pie */
.nt-pie-wrap{
	max-width: var(--container-max-width, 1140px);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- rejilla ---------- */
.nt-pie-grid{
	display: grid;
	gap: 42px 34px;
	grid-template-columns: 1fr;
}
@media (min-width: 680px){
	.nt-pie-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px){
	.nt-pie-grid{ grid-template-columns: 1.25fr .8fr 1fr 1.15fr; gap: 40px; }
}

/* ---------- marca ---------- */
.nt-pie-logo{
	display: block;
	width: 230px;
	max-width: 100%;
	height: auto;
	margin-bottom: 26px;
}

/* crema sobre olivo profundo = 6.3:1 */
.nt-pie-ced{
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--e-global-color-a1ed974);            /* crema */
}
.nt-pie-ced strong{
	display: block;
	font-weight: 600;
	color: var(--e-global-color-63ebf2f);            /* hueso */
}
.nt-cifras{ font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- columnas ---------- */
.nt-pie-tit{
	margin: 0 0 16px;
	padding-bottom: 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--e-global-color-a1ed974);            /* crema */
	position: relative;
}
/* el único toque cálido del pie: una rayita ocre bajo cada título */
.nt-pie-tit::after{
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 26px; height: 2px;
	background: var(--e-global-color-6872df1);       /* ocre */
}

.nt-pie-lista{ list-style: none; margin: 0; padding: 0; }
.nt-pie-lista li{ margin-bottom: 9px; }

.nt-pie-lista a,
.nt-pie-mapa{
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	color: var(--e-global-color-63ebf2f);            /* hueso — 8.8:1 */
	transition: color .25s ease, transform .25s ease;
}
.nt-pie-lista a:hover,
.nt-pie-mapa:hover{
	color: var(--e-global-color-6872df1);            /* ocre al pasar el cursor */
	transform: translateX(4px);
}
.nt-pie-lista a:focus-visible,
.nt-pie-mapa:focus-visible{
	outline: 2px solid var(--e-global-color-a1ed974);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- consultorios ---------- */
.nt-pie-dir{
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--e-global-color-a1ed974);            /* crema */
}
.nt-pie-dir strong{
	display: block;
	font-weight: 600;
	margin-bottom: 3px;
	color: var(--e-global-color-63ebf2f);            /* hueso */
}
.nt-pie-mapa{ margin-top: 4px; font-size: 13px; font-weight: 600; }

.nt-pie-horario{
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--e-global-color-a1ed974);            /* crema */
	opacity: .88;
}

/* ---------- barra de abajo ---------- */
.nt-pie-base{
	margin-top: 52px;
	padding-top: 22px;
	border-top: 1px solid rgba(222, 216, 186, .22);  /* crema al 22% */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
}
.nt-pie-base p{
	margin: 0;
	font-size: 12.5px;
	color: var(--e-global-color-a1ed974);            /* crema */
}
.nt-pie-credito a{
	color: var(--e-global-color-63ebf2f);
	text-decoration: none;
	font-weight: 600;
	transition: color .25s ease;
}
.nt-pie-credito a:hover{ color: var(--e-global-color-6872df1); }

@media (max-width: 679px){
	.nt-pie{ padding-top: 48px; }
	.nt-pie-base{ justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce){
	.nt-pie-lista a, .nt-pie-mapa, .nt-pie-credito a{ transition: none; }
	.nt-pie-lista a:hover, .nt-pie-mapa:hover{ transform: none; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Sinkin Sans';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://nutriologasquetransforman.com/wp-content/uploads/2026/08/SinkinSans-400-Regular.woff2') format('woff2'),
		url('https://nutriologasquetransforman.com/wp-content/uploads/2026/08/SinkinSans-400-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Sinkin Sans';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://nutriologasquetransforman.com/wp-content/uploads/2026/08/SinkinSans-500-Medium.woff2') format('woff2'),
		url('https://nutriologasquetransforman.com/wp-content/uploads/2026/08/SinkinSans-500-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Sinkin Sans';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://nutriologasquetransforman.com/wp-content/uploads/2026/08/SinkinSans-600-SemiBold.woff2') format('woff2'),
		url('https://nutriologasquetransforman.com/wp-content/uploads/2026/08/SinkinSans-600-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Sinkin Sans';
	font-style: italic;
	font-weight: 400;
	font-display: auto;
	src: url('https://nutriologasquetransforman.com/wp-content/uploads/2026/08/SinkinSans-400-Italic.woff2') format('woff2'),
		url('https://nutriologasquetransforman.com/wp-content/uploads/2026/08/SinkinSans-400-Italic.woff') format('woff');
}
/* End Custom Fonts CSS */