/* ═══════════════════════════════════════════════════════════════
   TNO — The Nutrition Orbit
   gtheme.css — Estilos globales del tema
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
	/* Colores TNO */
	--tno-blue:   #A8C4DA;
	--tno-orange: #E8A47A;
	--tno-yellow: #E8D080;
	--tno-teal:   #7ABFBA;
	--tno-green:  #8DC48A;
	--tno-purple: #B09AC8;

	/* Neutros */
	--n-0:   #FFFFFF;
	--n-50:  #FAF9F6;
	--n-100: #F4F1EC;
	--n-200: #EAE6DF;
	--n-300: #D8D3CA;
	--n-400: #B8B2A8;
	--n-500: #8A8478;
	--n-600: #605A50;
	--n-700: #3D3830;
	--n-800: #252218;

	/* Texto */
	--text-primary:   #2E2B24;
	--text-secondary: #6B6560;
	--text-tertiary:  #9E9890;
	--text-inverse:   #FDFCF9;

	/* Superficies */
	--surface-base:  #F4F1EC;
	--surface-white: #FFFFFF;

	/* Semánticos (compatibilidad con vistas del admin) */
	--color1: var(--tno-teal);
	--color2: var(--tno-purple);
	--color3: var(--tno-blue);
	--verde:         #2acb35;
	--verde_oscuro:  #339933;
	--rojo:          #f52120;
	--gris:          #B8B2A8;
	--gris_claro:    #EAE6DF;
	--gris_oscuro:   #605A50;
	--blanco:        #FFFFFF;
	--negro:         #2E2B24;

	/* Bootstrap overrides */
	--bs-heading-color: var(--text-primary);
	--bs-breadcrumb-divider: "➔";

	/* Radios */
	--r-sm:   8px;
	--r-md:   14px;
	--r-lg:   20px;
	--r-xl:   28px;
	--r-2xl:  40px;
	--r-full: 9999px;

	/* Tipografía */
	--font-display: 'Montserrat', sans-serif;
	--font-body:    'DM Sans', sans-serif;

	/* Easings */
	--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
	height: 100%;
	font-size: 1rem;
}

body {
	background: var(--surface-base);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 800;
	color: var(--text-primary);
}

a {
	color: var(--tno-teal);
	text-decoration: none;
}

a:hover {
	color: #6AAFAA;
}

img {
	display: block;
	max-width: 100%;
}

main {
	margin-top: 0;
}


/* ── Bootstrap overrides ────────────────────────────────────── */
.btn {
	border-radius: var(--r-full);
	font-family: var(--font-display);
	font-weight: 700;
}

.btn-primary,
.wizard > .actions a,
.wizard > .actions a:active,
.wizard > .actions a:hover,
div.tox .tox-button:not(.tox-button--naked):not(.tox-button--secondary),
.swal2-popup .swal2-actions button.swal2-confirm,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
	--bs-btn-color:              #fff;
	--bs-btn-bg:                 var(--tno-teal);
	--bs-btn-border-color:       var(--tno-teal);
	--bs-btn-hover-color:        #fff;
	--bs-btn-hover-bg:           #6AAFAA;
	--bs-btn-hover-border-color: #6AAFAA;
	--bs-btn-focus-shadow-rgb:   122, 191, 186;
	--bs-btn-active-color:       #fff;
	--bs-btn-active-bg:          #5A9F9A;
	--bs-btn-active-border-color:#5A9F9A;
	--bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.125);
	--bs-btn-disabled-color:     #fff;
	--bs-btn-disabled-bg:        var(--tno-teal);
	--bs-btn-disabled-border-color: var(--tno-teal);
	min-width: 9em;
	font-size: 0.9em;
	text-transform: uppercase;
}

.btn-success {
	--bs-btn-color:              #fff;
	--bs-btn-bg:                 #2acb35;
	--bs-btn-border-color:       #2acb35;
	--bs-btn-hover-color:        #fff;
	--bs-btn-hover-bg:           #048b3f;
	--bs-btn-hover-border-color: #04823b;
	--bs-btn-focus-shadow-rgb:   43, 177, 101;
	--bs-btn-active-color:       #fff;
	--bs-btn-active-bg:          #04823b;
	--bs-btn-active-border-color:#047a38;
	--bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.125);
	--bs-btn-disabled-color:     #fff;
	--bs-btn-disabled-bg:        #2acb35;
	--bs-btn-disabled-border-color: #2acb35;
}

.btn-outline-success {
	--bs-btn-color:              var(--tno-teal);
	--bs-btn-border-color:       var(--tno-teal);
	--bs-btn-hover-color:        #fff;
	--bs-btn-hover-bg:           var(--tno-teal);
	--bs-btn-hover-border-color: var(--tno-teal);
	--bs-btn-focus-shadow-rgb:   122, 191, 186;
	--bs-btn-active-color:       #fff;
	--bs-btn-active-bg:          var(--tno-teal);
	--bs-btn-active-border-color:var(--tno-teal);
	--bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.125);
	--bs-btn-disabled-color:     var(--tno-teal);
	--bs-btn-disabled-bg:        transparent;
	--bs-btn-disabled-border-color: var(--tno-teal);
	font-size: 0.9em;
	font-weight: 600;
	text-transform: uppercase;
}

.btn-light {
	--bs-btn-color:              #000;
	--bs-btn-bg:                 #e3e5e6;
	--bs-btn-border-color:       #e3e5e6;
	--bs-btn-hover-color:        #000;
	--bs-btn-hover-bg:           #d3d4d5;
	--bs-btn-hover-border-color: #c6c7c8;
	--bs-btn-focus-shadow-rgb:   211, 212, 213;
	--bs-btn-active-color:       #000;
	--bs-btn-active-bg:          #c6c7c8;
	--bs-btn-active-border-color:#babbbc;
	--bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.125);
	--bs-btn-disabled-color:     #000;
	--bs-btn-disabled-bg:        #e3e5e6;
	--bs-btn-disabled-border-color: #e3e5e6;
}

.btn-navegacion {
	padding: 0.1em 0.5em;
	color: var(--blanco);
	background-color: var(--gris);
	border-radius: 0.5em;
}

.btn-navegacion:hover,
.btn-navegacion:active {
	color: var(--gris_oscuro);
	border-color: var(--gris);
}

.form-control,
.form-select {
	border-radius: var(--r-md);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--tno-teal);
	box-shadow: 0 0 0 0.2rem rgba(122, 191, 186, 0.25);
}

.modal {
	--bs-modal-width: 600px;
	--bs-modal-border-radius: var(--r-xl);
}

.breadcrumb .breadcrumb-item a {
	font-size: 0.85em;
	color: var(--text-secondary);
	text-transform: uppercase;
}

.breadcrumb .breadcrumb-item a:hover {
	color: var(--tno-teal);
}

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--text-secondary);
}

.breadcrumb .breadcrumb-item.active {
	font-size: 1.0em;
	color: var(--tno-teal);
}


/* ── Utilidades globales ────────────────────────────────────── */
.divisor {
	color: transparent;
	box-shadow: 0px 1px 0px 0px var(--n-200);
}

.gradient-text {
	background: linear-gradient(135deg, #7ABFBA 0%, #B09AC8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.gradient-text-warm {
	background: linear-gradient(135deg, #E8A47A 0%, #E8D080 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.gradient-text-green {
	background: linear-gradient(135deg, #8DC48A 0%, #7ABFBA 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cover-img {
	min-height: 35em;
	height: auto;
	padding-top: 8em;
	margin-bottom: 1.5em;
	background: rgba(0,0,0,0.5);
}

@media (max-width: 575.98px) {
	.cover-img {
		min-height: 15em;
		padding-top: 4em;
	}
}

.inner-title {
	font-size: 2.5em;
	font-weight: 800;
	color: var(--text-primary);
}

.subtitulo-seccion {
	font-weight: 400;
	color: var(--tno-teal);
	text-transform: none;
}

.titulo-seccion {
	font-size: 1.5em;
	font-weight: 800;
	text-transform: uppercase;
}

.titulo-form {
	font-size: 1.4em;
	font-weight: 800;
	color: var(--tno-teal);
	text-transform: uppercase;
}

.titulo-bloque {
	font-size: 1.1em;
	font-weight: 600;
	color: var(--tno-teal);
}

.link-bloque {
	font-size: 0.9em;
}

.text-normal {
	text-transform: none !important;
}

/* Scroll reveal */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }


/* ── Buscador ───────────────────────────────────────────────── */
.buscador .btn {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid var(--n-200);
	border-radius: 0;
	color: var(--gris);
}

.buscador .form-control {
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0;
	background-color: transparent;
}

.buscador .form-control:focus {
	box-shadow: none;
	border-color: var(--tno-teal);
}

.buscador .form-control:focus ~ .btn {
	border-color: var(--tno-teal);
	color: var(--gris_oscuro);
}


/* ── Filtros ────────────────────────────────────────────────── */
.filtros .accordion-button::after {
	background: none;
}

.filtros.accordion .accordion-button {
	background-color: transparent;
	font-size: 0.65em;
	font-weight: 600;
	color: var(--bs-heading-color);
	box-shadow: 0px 0px 0px 1px var(--n-200);
}

.filtros.accordion .accordion-button::before {
	font-family: 'FontAwesome';
	content: '\f1de';
	float: left;
	margin-right: 0.5em;
	font-size: 0.75em;
	font-weight: 400;
}

.filtros.accordion .accordion-button:not(.collapsed)::after,
.filtros.accordion .accordion-button.collapsed::after {
	font-family: 'FontAwesome';
	content: '\f102';
	font-size: 0.75em;
	font-weight: 400;
}

.filtros .form-label {
	margin-bottom: 0.2em;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--tno-teal);
}

.filtros .form-select {
	background-color: var(--n-100);
}


/* ── Productos / catálogo ───────────────────────────────────── */
.prod-container {
	position: relative;
	border: 1px solid var(--n-200);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.prod-container.prod-agotado:after {
	content: 'agotado';
	position: absolute;
	top: 50%; left: 50%;
	padding: 0.5em;
	margin-left: -2.5em;
	margin-top: -1.3em;
	font-size: 3em;
	background-color: var(--n-300);
	rotate: -45deg;
}

.prod-descuento {
	margin-left: 0.5em;
	font-size: 0.7em;
	color: var(--verde);
}

@media (max-width: 575.98px) {
	.prod-descuento { display: block; margin-left: 0; }
}

.prod-envio {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--verde_oscuro);
}

.prod-precio-orig {
	margin: 0;
	font-size: 0.85em;
	color: var(--gris_oscuro);
	text-decoration: line-through;
}

.prod-precio-final {
	font-size: 1.4em;
	color: var(--text-primary);
}

.prod-titulo {
	margin-top: 1em;
	margin-bottom: 0.7em;
	font-size: 0.9em;
}

.prod-titulo a { color: var(--gris_oscuro); }
.prod-titulo a:hover { color: var(--tno-teal); }

.productos .card { border-color: var(--n-200); border-radius: var(--r-lg); }
.productos .card .imagen { overflow: hidden; }
.productos .card img { transform: scale(1); transition: 0.4s ease all; }
.productos .card img:hover { transform: scale(1.05); }
.productos .card .marca { font-size: 0.8em; font-weight: 600; color: var(--gris); text-transform: uppercase; }
.productos .card .nombre { font-size: 0.95em; color: var(--tno-teal); text-transform: uppercase; }
.productos .card .precio { font-size: 1.2em; font-weight: 600; color: var(--gris_oscuro); }


/* ── Detalle producto ───────────────────────────────────────── */
section#producto { margin-top: 5em; }

.producto .detalles .especificaciones .titulo { font-weight: 800; color: var(--tno-teal); }
.producto .detalles .nav-link { margin-right: 0.25em; color: var(--gris_oscuro); background-color: var(--n-200); border-radius: var(--r-sm); }
.producto .detalles .nav-link.active { background-color: var(--n-0); }
.producto .detalles .nav-tabs { border-bottom: none; }

@media (max-width: 575.98px) {
	.producto .detalles .nav-tabs { flex-wrap: nowrap; overflow-x: auto; }
}

.producto .detalles .resumen { font-size: 1.0em; font-weight: 400; }
.producto .detalles .tab-content { min-height: 8em; border: 1px solid var(--n-200); border-radius: 0 var(--r-md) var(--r-md) var(--r-md); }
.producto .marca a { font-weight: 600; color: var(--gris_oscuro); text-transform: uppercase; }
.producto .precio { margin-bottom: 0; font-size: 2.0em; font-weight: 800; color: var(--text-primary); }
.producto .precio.agotado { text-decoration: line-through; }
.producto .producto-titulo { font-size: 1.75em; font-weight: 800; color: var(--tno-teal); text-transform: uppercase; }
.producto .txt-agotado { margin-top: 0; font-size: 1.5em; color: #555; text-transform: uppercase; }
.producto .variaciones label { font-size: 0.9em; font-weight: 600; text-transform: uppercase; }

.comentarios .form-control { font-size: 0.875em; }


/* ── Carrito ────────────────────────────────────────────────── */
.carrito .control-cantidad { width: 9em; }
.carrito .control-cantidad .btn { border-color: var(--n-200); border-radius: var(--r-sm); }
.carrito .control-cantidad .form-control { font-size: 0.8em; text-align: center; }
.carrito .form-label { color: var(--gris); text-transform: uppercase; }
.carrito .tbody { padding: 0.5em 0; border-bottom: 1px solid var(--n-200); }
.carrito .theader { padding: 0.5em 0.2em; color: var(--blanco); background-color: var(--tno-teal); text-transform: uppercase; border-radius: var(--r-sm) var(--r-sm) 0 0; }

@media (max-width: 575.98px) {
	.carrito .tbody, .carrito .theader { font-size: 0.8em; }
}

.carrito .tbody .marca a { font-size: 0.8em; font-weight: 600; color: var(--gris_oscuro); text-transform: uppercase; }
.carrito .tbody .producto { line-height: 1.2em; }
.carrito .tbody .producto a { font-size: 0.9em; font-weight: 600; color: var(--tno-teal); text-transform: uppercase; }
.carrito .tbody .precio { font-weight: 600; }
.carrito .tbody .remove { color: var(--text-primary); }
.carrito .tbody .remove:hover { color: var(--tno-teal); }
.carrito .tbody .variante,
.carrito .tbody .variante a { font-size: 0.8em; color: var(--gris_oscuro); text-transform: uppercase; }
.carrito .tbody .marca a:hover,
.carrito .tbody .producto a:hover,
.carrito .tbody .variante a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
	.carrito .totales { font-size: 0.9em; }
}

.flotante-carrito {
	position: fixed;
	top: 50%; left: 0;
	display: flex;
	width: 3.5em; height: 3.1em;
	padding-right: 0.5em;
	font-size: 1.2em;
	background-color: var(--gris_oscuro);
	box-shadow: 6px 2px 4px 0px #00000094;
	align-items: center;
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	transition: 0.25s ease all;
}
.flotante-carrito:hover { background-color: var(--tno-teal); }
.flotante-carrito a { position: relative; color: var(--blanco); text-align: right; line-height: 1em; }
.flotante-carrito small { font-size: 0.75em; }
.flotante-carrito .badge { padding-left: 0; padding-right: 0; font-size: 0.7em; font-weight: 400; }

.slick-prev::before, .slick-next::before { color: var(--n-200); }
.slick-dots { bottom: 0.8em; }
.slick-dots li button::before { content: '◯'; font-size: 12px; color: var(--blanco); opacity: 0.25; }
.slick-dots li.slick-active button::before { color: var(--blanco); opacity: 0.85; }
.slick-slide { height: inherit !important; }
.slick-track { display: flex !important; }


/* ── Formularios de contacto ────────────────────────────────── */
#contactForm .form-control {
	padding: 0.7em 1.4em;
	margin-bottom: 1em;
}

#contactForm .btn {
	width: 100%;
	padding: 0.8em;
}

#contactForm .text-danger {
	display: block;
	margin-top: -0.8em;
	margin-bottom: 1em;
}

.newslettr-label {
	font-size: 1.5em;
	font-weight: 800;
	color: var(--rojo);
	text-transform: uppercase;
}

@media (max-width: 575.98px) {
	.newslettr-label { font-size: 1.2em; }
}


/* ── TNO: Puntos nutricionales ──────────────────────────────── */
.tno-punto {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--r-full);
}

.tno-punto-azul   { background: rgba(168,196,218,0.20); color: #4A7A9B; border: 1px solid rgba(168,196,218,0.5); }
.tno-punto-naranja{ background: rgba(232,164,122,0.20); color: #B05A20; border: 1px solid rgba(232,164,122,0.5); }
.tno-punto-amarillo{ background: rgba(232,208,128,0.20); color: #8A6010; border: 1px solid rgba(232,208,128,0.5); }
.tno-punto-verde  { background: rgba(141,196,138,0.20); color: #2A6828; border: 1px solid rgba(141,196,138,0.5); }

.tno-dot-azul    { width: 10px; height: 10px; border-radius: 50%; background: var(--tno-blue); }
.tno-dot-naranja { width: 10px; height: 10px; border-radius: 50%; background: var(--tno-orange); }
.tno-dot-amarillo{ width: 10px; height: 10px; border-radius: 50%; background: var(--tno-yellow); }
.tno-dot-verde   { width: 10px; height: 10px; border-radius: 50%; background: var(--tno-green); }
.tno-dot-teal    { width: 10px; height: 10px; border-radius: 50%; background: var(--tno-teal); }
.tno-dot-purple  { width: 10px; height: 10px; border-radius: 50%; background: var(--tno-purple); }


/* ── TNO: Sección genérica ──────────────────────────────────── */
.tno-section { padding: 72px 20px; }
.tno-section-inner { max-width: 1040px; margin: 0 auto; }
.tno-section-dark { background: #141210; }
.tno-section-white { background: var(--n-0); }
.tno-section-base { background: var(--surface-base); }

.tno-section-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tno-teal);
	margin-bottom: 14px;
}

.tno-section-tag::before {
	content: '';
	width: 20px;
	height: 2px;
	background: linear-gradient(90deg, var(--tno-teal), var(--tno-purple));
	border-radius: 2px;
}

.tno-section-title {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.6px;
	color: var(--text-primary);
	margin-bottom: 14px;
}

.tno-section-subtitle {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.65;
	margin-bottom: 32px;
}

@media (min-width: 1024px) {
	.tno-section { padding: 96px 40px; }
	.tno-section-title { font-size: 38px; }
}


/* ── TNO: Cards genéricas ───────────────────────────────────── */
.tno-card {
	background: var(--n-0);
	border: 1px solid var(--n-200);
	border-radius: var(--r-xl);
	padding: 24px;
	transition: all 0.25s var(--ease-out);
}

.tno-card:hover {
	border-color: var(--tno-teal);
	box-shadow: 0 8px 32px rgba(122, 191, 186, 0.15);
	transform: translateY(-2px);
}


/* ── TNO: Botones ───────────────────────────────────────────── */
.btn-tno-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: var(--r-full);
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, #7ABFBA 0%, #6AAFAA 100%);
	color: white;
	text-decoration: none;
	transition: all 0.25s var(--ease-out);
	box-shadow: 0 4px 24px rgba(122, 191, 186, 0.45);
	min-height: 50px;
}

.btn-tno-primary:hover {
	background: linear-gradient(135deg, #6AAFAA 0%, #5A9F9A 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 32px rgba(122, 191, 186, 0.55);
	color: white;
}

.btn-tno-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	padding: 13px 28px;
	border-radius: var(--r-full);
	border: 1.5px solid var(--n-300);
	cursor: pointer;
	background: var(--n-0);
	color: var(--text-primary);
	text-decoration: none;
	transition: all 0.2s ease;
	min-height: 50px;
}

.btn-tno-secondary:hover {
	border-color: var(--n-400);
	background: var(--n-50);
	color: var(--text-primary);
}

.btn-tno-purple {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	padding: 11px 20px;
	border-radius: var(--r-full);
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, #B09AC8, #9A88B8);
	color: white;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 4px 16px rgba(176, 154, 200, 0.45);
}

.btn-tno-purple:hover {
	box-shadow: 0 8px 24px rgba(176, 154, 200, 0.55);
	transform: translateY(-1px);
	color: white;
}


/* ── TNO: Badges y chips ────────────────────────────────────── */
.tno-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: var(--r-full);
	background: var(--n-0);
	border: 1px solid var(--n-200);
	color: var(--text-secondary);
	box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.tno-badge-teal   { background: rgba(122,191,186,0.15); border-color: rgba(122,191,186,0.4); color: #3A8F8A; }
.tno-badge-purple { background: rgba(176,154,200,0.15); border-color: rgba(176,154,200,0.4); color: #6A5A88; }
.tno-badge-yellow { background: rgba(232,208,128,0.15); border-color: rgba(232,208,128,0.5); color: #7A6010; }
.tno-badge-pronto {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--tno-yellow);
	color: #7A6010;
	padding: 3px 8px;
	border-radius: var(--r-full);
}


/* ── TNO: Proof / social proof ──────────────────────────────── */
.tno-proof-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: rgba(255,255,255,0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: var(--r-xl);
	border: 1px solid rgba(255,255,255,0.9);
	box-shadow: 0 4px 20px rgba(122,191,186,0.10);
}

.tno-proof-avatars { display: flex; flex-shrink: 0; }
.tno-proof-avatar {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 2px solid var(--n-0);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
	margin-left: -8px;
}
.tno-proof-avatar:first-child { margin-left: 0; }


/* ── Slick (si se usa en TNO) ───────────────────────────────── */
@media (max-width: 575.98px) {
	.slick-dots { bottom: 0.2em; }
}


/* ── Paginación ─────────────────────────────────────────────── */
.pag-3, .pag-4 { margin-top: 3em; }

@media (max-width: 575.98px) {
	.pag-3, .pag-4 { margin-top: 0; }
}


/* ── Footer mobile ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
	footer { padding-bottom: 2em; }
}

/* ── Global fixes ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }

/* ── Navbar scroll */
.navbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 0 20px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(244, 241, 236, 0.88);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(216, 211, 202, 0.6);
	transition: box-shadow 0.3s ease;
}
.navbar.scrolled {
	box-shadow: 0 2px 24px rgba(45,40,30,0.10);
	border-bottom-color: rgba(216,211,202,0.8);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-img {
	width: 34px; height: 34px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--n-0);
	box-shadow: 0 1px 6px rgba(0,0,0,0.08);
	flex-shrink: 0;
}
.nav-logo-img img { width: 100%; height: 100%; object-fit: cover; }
.nav-logo-text {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 800;
	color: var(--text-primary);
	letter-spacing: -0.2px;
}
.nav-logo-text span {
	background: linear-gradient(135deg, #7ABFBA, #B09AC8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-links { display: none; gap: 4px; align-items: center; }
.nav-link {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary);
	padding: 7px 12px;
	border-radius: var(--r-full);
	transition: all 0.2s ease;
	cursor: pointer;
	text-decoration: none;
}
.nav-link:hover { background: var(--n-200); color: var(--text-primary); }
.nav-login {
	display: none;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	background: transparent;
	border: 1.5px solid var(--n-300);
	color: var(--text-secondary);
	padding: 7px 16px;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
}
.nav-login:hover { border-color: var(--n-400); background: var(--n-100); color: var(--text-primary); }
.nav-cta {
	display: none;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	background: var(--tno-teal);
	color: white;
	border: none;
	padding: 9px 20px;
	border-radius: var(--r-full);
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	text-decoration: none;
}
.nav-cta:hover {
	background: #6AAFAA;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(122,191,186,0.4);
	color: white;
}
.hamburger {
	width: 40px; height: 40px;
	border-radius: var(--r-full);
	background: var(--n-0);
	border: 1px solid var(--n-200);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4.5px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.hamburger:hover { background: var(--n-100); }
.hamburger span {
	display: block;
	width: 16px; height: 1.5px;
	background: var(--text-primary);
	border-radius: 2px;
	transition: all 0.25s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
	position: fixed;
	top: 60px; left: 0; right: 0;
	background: rgba(244,241,236,0.97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--n-200);
	padding: 16px 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 99;
	transform: translateY(-8px);
	opacity: 0;
	pointer-events: none;
	transition: all 0.28s var(--ease-out);
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; }
.mobile-menu-link {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	padding: 13px 16px;
	border-radius: var(--r-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: background 0.15s;
	text-decoration: none;
}
.mobile-menu-link:hover { background: var(--n-200); color: var(--text-primary); }
.mobile-menu-cta {
	margin-top: 8px;
	background: var(--tno-teal);
	color: white;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	padding: 15px;
	border-radius: var(--r-full);
	text-align: center;
	cursor: pointer;
	border: none;
	width: 100%;
	transition: all 0.2s;
	text-decoration: none;
	display: block;
}
.mobile-menu-cta:hover { background: #6AAFAA; color: white; }


/* ── Footer ─────────────────────────────────────────────────── */
.tno-footer {
	background: #0E0D0B;
	padding: 48px 20px 36px;
	color: var(--n-400);
	position: relative;
	overflow: hidden;
}
.tno-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 40% at 0% 0%,   rgba(122,191,186,0.07) 0%, transparent 55%),
		radial-gradient(ellipse 50% 35% at 100% 100%, rgba(176,154,200,0.06) 0%, transparent 50%);
	pointer-events: none;
}
.tno-footer-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.tno-footer-top {
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tno-footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tno-footer-logo-icon {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
}
.tno-footer-logo-text {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 800;
	color: var(--n-0);
	letter-spacing: -0.2px;
}
.tno-footer-tagline {
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba(255,255,255,0.42);
	line-height: 1.6;
	max-width: 280px;
	margin-bottom: 20px;
}
.tno-footer-orbit-dots { display: flex; gap: 6px; margin-bottom: 8px; }
.tno-footer-orbit-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	opacity: 0.75;
	box-shadow: 0 0 8px currentColor;
}
.tno-footer-nav { display: flex; flex-direction: column; gap: 0; margin-bottom: 10px; }
.tno-footer-nav-group { margin-bottom: 24px; }
.tno-footer-nav-title {
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	margin-bottom: 12px;
}
.tno-footer-nav-link {
	display: block;
	font-family: var(--font-body);
	font-size: 14px;
	color: rgba(255,255,255,0.45);
	padding: 6px 0;
	transition: color 0.15s;
	cursor: pointer;
	text-decoration: none;
}
.tno-footer-nav-link:hover { color: rgba(255,255,255,0.90); }
.tno-footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid rgba(255,255,255,0.06);
	padding-top: 24px;
}
.tno-footer-legal {
	font-family: var(--font-body);
	font-size: 12px;
	color: rgba(255,255,255,0.28);
	line-height: 1.6;
}
.tno-footer-legal a { color: rgba(255,255,255,0.45); text-decoration: underline; text-underline-offset: 2px; }


/* ── WhatsApp flotante ──────────────────────────────────────── */
.tno-whatsapp {
	position: fixed;
	bottom: 24px; right: 24px;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: #25D366;
	color: white;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
	box-shadow: 0 4px 20px rgba(37,211,102,0.45);
	z-index: 200;
	transition: all 0.25s var(--ease-spring);
	text-decoration: none;
}
.tno-whatsapp:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37,211,102,0.55); color: white; }


/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
	main { margin-top: 50px; }
	.navbar { padding: 0 40px; height: 64px; }
	.nav-links { display: flex; }
	.nav-login { display: block; }
	.nav-cta { display: block; }
	.hamburger { display: none; }
	.mobile-menu { display: none !important; }
	.tno-footer-nav { flex-direction: row; gap: 120px; }
	.tno-footer-top { display: flex; gap: 70px; align-items: flex-start; }
	.tno-footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}


/* ═══════════════════════════════════════════════════════════════
   TNO HOME — Secciones del landing
   ═══════════════════════════════════════════════════════════════ */

/* ── Utilidades compartidas ─────────────────────────────────── */
.section-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tno-teal);
	margin-bottom: 14px;
}
.section-tag::before {
	content: '';
	width: 20px; height: 2px;
	background: linear-gradient(90deg, var(--tno-teal), var(--tno-purple));
	border-radius: 2px;
}
.section-title {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.6px;
	color: var(--text-primary);
	margin-bottom: 14px;
}
.section-subtitle {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.65;
	margin-bottom: 32px;
}
@media (min-width: 1024px) {
	.section-title { font-size: 38px; }
}


/* ── H-01 HERO ──────────────────────────────────────────────── */
.hero-section {
	padding: 20px 20px 0;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	background: var(--surface-base);
	min-height: 92svh;
}
.hero-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 55% 45% at 85%  5%, rgba(122,191,186,0.28) 0%, transparent 55%),
		radial-gradient(ellipse 45% 40% at  5% 85%, rgba(176,154,200,0.22) 0%, transparent 52%),
		radial-gradient(ellipse 38% 32% at 92% 88%, rgba(232,208,128,0.20) 0%, transparent 48%),
		radial-gradient(ellipse 32% 28% at 15% 15%, rgba(168,196,218,0.18) 0%, transparent 48%);
	pointer-events: none;
	z-index: 0;
}

/* Orbit decoration */
.hero-orbit {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(122,191,186,0.18);
	pointer-events: none;
	animation: tno-orbit-pulse 8s ease-in-out infinite;
}
.hero-orbit-1 { width: 340px; height: 340px; top: -80px; right: -100px; }
.hero-orbit-2 { width: 220px; height: 220px; top: -20px; right: -40px; border-color: rgba(176,154,200,0.14); animation-delay: -3s; }
.hero-orbit-dot {
	position: absolute;
	border-radius: 50%;
	animation: tno-dot-float 6s ease-in-out infinite;
}
.hero-orbit-dot-1 { width: 10px; height: 10px; background: var(--tno-teal);   opacity: 0.5; top:  60px; right:  20px; animation-delay: -1s; }
.hero-orbit-dot-2 { width:  7px; height:  7px; background: var(--tno-purple); opacity: 0.4; top: 110px; right:  80px; animation-delay: -4s; }
.hero-orbit-dot-3 { width: 12px; height: 12px; background: var(--tno-yellow); opacity: 0.45; top: 180px; right: 10px; animation-delay: -2s; }

@keyframes tno-orbit-pulse {
	0%,100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.03); opacity: 0.7; }
}
@keyframes tno-dot-float {
	0%,100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

.hero-content-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 40px 0 32px;
	position: relative;
	z-index: 2;
	max-width: 560px;
}

.hero-overline {
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: linear-gradient(90deg, var(--tno-teal), var(--tno-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 14px;
	opacity: 0;
	animation: tno-fade-up 0.6s var(--ease-out) 0.1s forwards;
}
.hero-title {
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -1.5px;
	color: var(--text-primary);
	margin-bottom: 18px;
	opacity: 0;
	animation: tno-fade-up 0.6s var(--ease-out) 0.2s forwards;
}
.hero-title em {
	font-style: normal;
	background: linear-gradient(135deg, #7ABFBA 0%, #B09AC8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.hero-subtitle {
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--text-secondary);
	max-width: 340px;
	margin-bottom: 12px;
	opacity: 0;
	animation: tno-fade-up 0.6s var(--ease-out) 0.3s forwards;
}
.hero-microcopy-top {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-secondary);
	margin-bottom: 20px;
	opacity: 0;
	animation: tno-fade-up 0.6s var(--ease-out) 0.35s forwards;
}
.hero-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	max-width: 340px;
	opacity: 0;
	animation: tno-fade-up 0.6s var(--ease-out) 0.42s forwards;
}
.btn-primary-hero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: linear-gradient(135deg, #7ABFBA 0%, #6AAFAA 100%);
	color: white;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	padding: 16px 28px;
	border-radius: var(--r-full);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s var(--ease-out);
	box-shadow: 0 4px 24px rgba(122,191,186,0.45);
	min-height: 54px;
}
.btn-primary-hero:hover {
	background: linear-gradient(135deg, #6AAFAA 0%, #5A9F9A 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 32px rgba(122,191,186,0.55);
	color: white;
}
.btn-arrow { font-size: 16px; transition: transform 0.2s ease; }
.btn-primary-hero:hover .btn-arrow { transform: translateX(3px); }

.hero-microcopy-badges-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	opacity: 0;
	animation: tno-fade-up 0.6s var(--ease-out) 0.48s forwards;
}
.hero-microcopy-badge {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	color: var(--text-secondary);
}
.hero-microcopy-sep { color: var(--n-400); }

.hero-proof {
	padding: 16px 0 20px;
	opacity: 0;
	animation: tno-fade-up 0.6s var(--ease-out) 0.55s forwards;
}
.hero-proof-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: rgba(255,255,255,0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: var(--r-xl);
	border: 1px solid rgba(255,255,255,0.9);
	box-shadow: 0 4px 20px rgba(122,191,186,0.10);
	max-width: 340px;
}
.proof-avatars { display: flex; flex-shrink: 0; }
.proof-avatar {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 2px solid var(--n-0);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
	margin-left: -8px;
}
.proof-avatar:first-child { margin-left: 0; }
.proof-text { flex: 1; }
.proof-text strong { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--text-primary); display: block; }
.proof-text span   { font-size: 11px; color: var(--text-tertiary); }
.proof-stars       { font-size: 13px; flex-shrink: 0; letter-spacing: -1px; }

@keyframes tno-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1024px) {
	.hero-section {
		padding: 64px 40px 0;
		max-width: 1120px;
		margin: 0 auto;
		flex-direction: row;
		align-items: center;
		gap: 60px;
	}
	.hero-content-col { flex: 1; padding: 0; max-width: 520px; }
	.hero-title { font-size: 58px; letter-spacing: -2.5px; }
	.hero-subtitle { font-size: 17px; max-width: 440px; }
	.hero-actions { flex-direction: row; align-items: center; }
	.btn-primary-hero { width: auto; }
}


/* ── H-02 QUÉ RESUELVE ──────────────────────────────────────── */
.section-resolve {
	padding: 72px 20px;
	background: var(--n-0);
	position: relative;
	overflow: hidden;
}
.section-resolve::before {
	content: '';
	position: absolute;
	width: 300px; height: 300px;
	background: radial-gradient(circle, rgba(122,191,186,0.08) 0%, transparent 70%);
	top: -80px; right: -80px;
	pointer-events: none;
}
.section-resolve-inner,
.section-how-inner,
.section-ctas-inner { max-width: 1040px; margin: 0 auto; }

/* Video placeholder */
.video-container {
	position: relative;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: linear-gradient(135deg, #C8E0D8 0%, #D8CBE8 60%, #D8E4F0 100%);
	aspect-ratio: 16/9;
	margin-bottom: 32px;
	box-shadow: 0 8px 40px rgba(0,0,0,0.10);
	cursor: pointer;
}
.video-play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.video-play-btn {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: rgba(255,255,255,0.88);
	backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 24px rgba(0,0,0,0.15);
	transition: transform 0.25s var(--ease-spring);
}
.video-container:hover .video-play-btn { transform: scale(1.1); }
.video-play-btn svg { width: 24px; height: 24px; fill: var(--tno-teal); margin-left: 3px; }
.video-play-label {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.85);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
	background: rgba(0,0,0,0.12);
	padding: 4px 12px;
	border-radius: var(--r-full);
}
.video-duration {
	position: absolute;
	bottom: 14px; right: 14px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	background: rgba(0,0,0,0.25);
	backdrop-filter: blur(6px);
	padding: 3px 10px;
	border-radius: var(--r-full);
}

/* Pain point cards */
.resolve-layout { display: flex; flex-direction: column; gap: 32px; }
.resolve-grid { display: flex; flex-direction: column; gap: 14px; }
.resolve-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px;
	background: var(--n-0);
	border: 1px solid var(--n-200);
	border-radius: var(--r-xl);
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
}
.resolve-card::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	border-radius: 3px 0 0 3px;
	background: var(--card-accent, var(--tno-teal));
}
.resolve-card:hover {
	border-color: var(--card-accent, var(--tno-teal));
	transform: translateX(4px);
	box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.resolve-icon {
	width: 46px; height: 46px;
	border-radius: var(--r-lg);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.resolve-body { flex: 1; }
.resolve-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.resolve-desc  { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

@media (min-width: 1024px) {
	.section-resolve { padding: 96px 40px; }
	.resolve-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
	.resolve-layout .video-container { margin-bottom: 0; }
	.resolve-grid { flex-direction: column; }
}


/* ── H-03 UN SISTEMA. TRES NIVELES. ─────────────────────────── */
.section-how {
	padding: 72px 20px;
	background: #141210;
	position: relative;
	overflow: hidden;
}
.section-how::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 65% 55% at 0%   20%, rgba(122,191,186,0.18) 0%, transparent 58%),
		radial-gradient(ellipse 55% 45% at 100% 80%, rgba(176,154,200,0.16) 0%, transparent 55%);
	pointer-events: none;
	z-index: 0;
}
.section-how > * { position: relative; z-index: 1; }
.section-how-inner { position: relative; z-index: 1; }
.section-how .section-tag   { color: var(--tno-teal); }
.section-how .section-title { color: #F4F1EC; }
.section-how .section-subtitle { color: rgba(244,241,236,0.6); }

.steps-list {
	display: flex;
	flex-direction: column;
	position: relative;
}
.steps-list::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 24px; bottom: 24px;
	width: 1.5px;
	background: linear-gradient(to bottom, var(--tno-teal), var(--tno-purple));
	opacity: 0.3;
}
.step-item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 18px 0;
	position: relative;
}
.step-num {
	width: 38px; height: 38px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 800;
	flex-shrink: 0;
	z-index: 1;
	box-shadow: 0 0 0 1.5px rgba(122,191,186,0.5), 0 2px 8px rgba(0,0,0,0.06);
}
.step-content { flex: 1; padding-top: 6px; }
.step-title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: #F4F1EC;
	margin-bottom: 3px;
}
.step-desc {
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba(244,241,236,0.58);
	line-height: 1.55;
}
.step-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--r-full);
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
}

@media (min-width: 1024px) {
	.section-how { padding: 96px 40px; }
}


/* ── H-04 ¿POR DÓNDE EMPIEZAS? ──────────────────────────────── */
.section-ctas {
	padding: 72px 20px;
	background: var(--n-0);
	position: relative;
	overflow: hidden;
}
.section-ctas::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 65% 55% at 50%  0%,  rgba(232,208,128,0.16) 0%, transparent 55%),
		radial-gradient(ellipse 45% 40% at 0%  100%, rgba(122,191,186,0.14) 0%, transparent 50%),
		radial-gradient(ellipse 45% 38% at 100% 55%, rgba(176,154,200,0.13) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}
.section-ctas-inner { position: relative; z-index: 1; }

.cta-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 32px;
}
.cta-card {
	position: relative;
	border-radius: var(--r-xl);
	overflow: hidden;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	cursor: pointer;
	transition: all 0.28s var(--ease-out);
	border: 1px solid transparent;
}
.cta-card:hover { transform: translateY(-3px); }
.cta-card-tag {
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}
.cta-card-title {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--text-primary);
}
.cta-card-desc {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-secondary);
	max-width: 280px;
}
.cta-card-btn {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	padding: 11px 20px;
	border-radius: var(--r-full);
	border: none;
	cursor: pointer;
	align-self: flex-start;
	transition: all 0.2s ease;
	min-height: 44px;
	text-decoration: none;
}
.cta-card-arrow { font-size: 14px; transition: transform 0.2s; }
.cta-card:hover .cta-card-arrow { transform: translateX(3px); }
.cta-card-deco {
	position: absolute;
	right: 20px; bottom: 20px;
	font-size: 52px;
	opacity: 0.12;
	pointer-events: none;
	transition: all 0.3s ease;
}
.cta-card:hover .cta-card-deco { opacity: 0.18; transform: scale(1.08) rotate(-5deg); }

/* Variantes */
.cta-card-convertidor {
	background: linear-gradient(145deg, rgba(122,191,186,0.18) 0%, rgba(168,196,218,0.22) 100%);
	border-color: rgba(122,191,186,0.4);
}
.cta-card-convertidor:hover { box-shadow: 0 16px 48px rgba(122,191,186,0.25); border-color: rgba(122,191,186,0.6); }
.cta-card-convertidor .cta-card-btn { background: linear-gradient(135deg, #7ABFBA, #6AAFAA); color: white; box-shadow: 0 4px 16px rgba(122,191,186,0.45); }
.cta-card-convertidor .cta-card-btn:hover { box-shadow: 0 8px 24px rgba(122,191,186,0.55); transform: translateY(-1px); color: white; }

.cta-card-programas {
	background: linear-gradient(145deg, rgba(232,208,128,0.20) 0%, rgba(232,164,122,0.16) 100%);
	border-color: rgba(232,164,122,0.35);
}
.cta-card-programas:hover { box-shadow: 0 16px 48px rgba(232,164,122,0.18); border-color: rgba(232,164,122,0.55); }
.cta-card-programas .cta-card-btn { background: linear-gradient(135deg, rgba(232,164,122,0.25), rgba(232,208,128,0.25)); color: var(--n-700); border: 1px solid rgba(232,164,122,0.4); }
.cta-card-programas .cta-card-btn:hover { background: linear-gradient(135deg, rgba(232,164,122,0.35), rgba(232,208,128,0.35)); }

@media (min-width: 640px) {
	.cta-cards { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.section-ctas { padding: 96px 40px; }
	.cta-cards { grid-template-columns: 1fr 1fr 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   TNO — Modales (Login + Waitlist)
   ═══════════════════════════════════════════════════════════════ */

.tno-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(14,13,11,0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}
.tno-modal-overlay.is-open { display: flex; }

.tno-modal {
	background: #FDFCF9;
	border-radius: 28px 28px 0 0;
	padding: 28px 20px 44px;
	width: 100%;
	max-width: 480px;
	box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
	position: relative;
	animation: tno-modal-up 0.32s var(--ease-out) forwards;
}
@keyframes tno-modal-up {
	from { transform: translateY(40px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.tno-modal-handle {
	width: 40px; height: 4px;
	border-radius: 2px;
	background: var(--n-300);
	margin: 0 auto 20px;
}
.tno-modal-close {
	position: absolute;
	top: 16px; right: 16px;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--n-100);
	border: none;
	cursor: pointer;
	font-size: 18px;
	color: var(--text-tertiary);
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s;
}
.tno-modal-close:hover { background: var(--n-200); }

.tno-modal-icon  { font-size: 36px; text-align: center; margin-bottom: 12px; }
.tno-modal-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 900;
	color: var(--text-primary);
	letter-spacing: -0.5px;
	text-align: center;
	margin-bottom: 6px;
}
.tno-modal-desc {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.55;
	text-align: center;
	margin-bottom: 24px;
}

/* Campos */
.tno-modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tno-modal-label {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}
.tno-modal-input {
	width: 100%;
	min-height: 48px;
	background: var(--n-100);
	border: 1.5px solid var(--n-200);
	border-radius: 14px;
	padding: 0 16px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-primary);
	outline: none;
	transition: border-color 0.2s;
}
.tno-modal-input:focus { border-color: var(--tno-teal); }

/* Botones */
.tno-modal-btn-primary {
	width: 100%;
	min-height: 52px;
	background: linear-gradient(135deg, var(--tno-teal), #6AAFAA);
	color: white;
	border: none;
	border-radius: var(--r-full);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 24px rgba(122,191,186,0.38);
	margin-bottom: 12px;
	transition: all 0.2s;
}
.tno-modal-btn-primary:hover {
	background: linear-gradient(135deg, #6AAFAA, #5A9F9A);
	box-shadow: 0 8px 32px rgba(122,191,186,0.50);
	transform: translateY(-1px);
}
.tno-modal-btn-primary.purple {
	background: linear-gradient(135deg, #7ABFBA, #B09AC8);
	box-shadow: 0 4px 24px rgba(122,191,186,0.38);
}
.tno-modal-btn-secondary {
	width: 100%;
	min-height: 44px;
	background: transparent;
	border: 1.5px solid var(--n-200);
	border-radius: var(--r-full);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.2s;
}
.tno-modal-btn-secondary:hover { border-color: var(--n-400); background: var(--n-50); }

.tno-modal-footer-text {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-tertiary);
	text-align: center;
	margin-bottom: 10px;
}
.tno-modal-footer-text a {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--tno-teal);
	margin-left: 4px;
	cursor: pointer;
}

/* Success state (waitlist) */
.tno-modal-success { display: none; text-align: center; padding: 16px 0; }
.tno-modal-success-icon  { font-size: 40px; margin-bottom: 12px; }
.tno-modal-success-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 800;
	color: var(--text-primary);
	margin-bottom: 8px;
}
.tno-modal-success-desc {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* Nota privacidad */
.tno-modal-privacy {
	font-family: var(--font-body);
	font-size: 11px;
	color: var(--text-tertiary);
	text-align: center;
	margin-top: 10px;
}

@media (min-width: 640px) {
	.tno-modal-overlay { align-items: center; padding: 20px; }
	.tno-modal { border-radius: 28px; padding: 36px 28px 36px; }
}

/* ── Fix resolve layout inner ───────────────────────────────── */
/* El contenedor sec-110 (section-resolve) ya tiene padding propio,
   el inner solo necesita max-width y centrado */
.section-resolve .section-resolve-inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
/* El resolve-layout (sec-112) actúa como grid 2 col en desktop */
@media (min-width: 1024px) {
	.section-resolve .section-resolve-inner {
		gap: 48px;
	}
	.resolve-layout {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		align-items: center;
	}
}