/* ════════════════════════════════════════════════════════════════════
   Triopcion Web · estilos de las extensiones y widgets (sistema TDS)
   Usa las variables --tds-* de tds-tokens.css. Lo que se ajuste a mano
   en cada widget de Elementor tiene más especificidad y siempre manda.
   ════════════════════════════════════════════════════════════════════ */

/* ── Temas de sección (Contenedor → Triopcion → Tema) ─────────────── */
.e-con.tds-theme-dark,
.e-con.tds-theme-light {
	background-color: var(--tds-bg);
	color: var(--tds-text);
}
.e-con:is(.tds-theme-dark, .tds-theme-light) :is(h1, h2, h3, h4, h5, h6) { color: var(--tds-text); }
/* :where() deja la especificidad baja para que los estilos de cada widget (títulos con enlace, listas) manden */
.e-con:is(.tds-theme-dark, .tds-theme-light) :where(a:not(.elementor-button)) { color: var(--tds-accent-text); }
/* Los widgets traen colores por defecto del kit (Títulos, Texto…). Dentro de una sección con tema
   manda el tema; un color puesto a mano en el widget sigue mandando sobre el tema. */
.e-con:is(.tds-theme-dark, .tds-theme-light) .elementor-heading-title { color: var(--tds-text); }
:is(.tds-theme-dark, .tds-theme-light) .elementor-widget-text-editor { color: var(--tds-text); }
.e-con:is(.tds-theme-dark, .tds-theme-light) .elementor-icon-list-text { color: var(--tds-text-dim); }
.e-con:is(.tds-theme-dark, .tds-theme-light) .elementor-icon-box-title { color: var(--tds-text); }
.e-con:is(.tds-theme-dark, .tds-theme-light) .elementor-icon-box-description { color: var(--tds-text-dim); }

/* Header fijo: deja espacio a la barra de administración cuando hay sesión iniciada */
body.admin-bar .e-con.tds-header { top: var(--wp-admin--admin-bar--height, 32px); }

/* ── Forma de sección ─────────────────────────────────────────────── */
.e-con.tds-shape--card {
	--width: calc(100% - 2 * clamp(8px, 1.4vw, 18px));
	margin-inline: auto;
	border-radius: var(--tds-radius-section);
	overflow: hidden;
}
.e-con.tds-shape--merge {
	border-radius: var(--tds-radius-section) var(--tds-radius-section) 0 0;
	overflow: hidden;
}

/* ── Superficies ──────────────────────────────────────────────────── */
.e-con.tds-surface--glass {
	background-color: var(--tds-glass);
	border: 1px solid var(--tds-glass-border);
	border-radius: var(--tds-radius-panel);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	box-shadow: var(--tds-shadow);
}
.e-con.tds-surface--card {
	background-color: var(--tds-surface);
	border: 1px solid var(--tds-line);
	border-radius: var(--tds-radius-card);
	box-shadow: var(--tds-shadow-e1);
}

/* ── Aura de color y cuadrícula: capas de fondo, sin elementos extra ─
   Orden de capas: aura 1, aura 2, desvanecido de la cuadrícula, líneas. */
:root {
	--tds-aura-blue: rgb(104 168 221 / 0.16);
	--tds-aura-orange: rgb(203 80 37 / 0.11);
	--tds-grid-line: rgb(29 34 55 / 0.07);
}
.tds-theme-dark {
	--tds-aura-blue: rgb(104 168 221 / 0.17);
	--tds-aura-orange: rgb(203 80 37 / 0.15);
	--tds-grid-line: rgb(240 244 251 / 0.075);
}
.e-con.tds-aura--duo {
	--tds-aura-1: radial-gradient(circle 640px at 8% -10%, var(--tds-aura-blue), transparent 70%);
	--tds-aura-2: radial-gradient(circle 580px at 94% 110%, var(--tds-aura-orange), transparent 70%);
}
.e-con.tds-aura--duo-flip {
	--tds-aura-1: radial-gradient(circle 580px at 92% -10%, var(--tds-aura-orange), transparent 70%);
	--tds-aura-2: radial-gradient(circle 640px at 6% 110%, var(--tds-aura-blue), transparent 70%);
}
.e-con.tds-aura--blue { --tds-aura-1: radial-gradient(circle 640px at var(--tds-aura-px, 8%) var(--tds-aura-py, -10%), var(--tds-aura-blue), transparent 70%); }
.e-con.tds-aura--orange { --tds-aura-2: radial-gradient(circle 580px at var(--tds-aura-px, 92%) var(--tds-aura-py, 110%), var(--tds-aura-orange), transparent 70%); }
.e-con.tds-aura-at-tl { --tds-aura-px: 8%; --tds-aura-py: -10%; }
.e-con.tds-aura-at-tc { --tds-aura-px: 50%; --tds-aura-py: -14%; }
.e-con.tds-aura-at-tr { --tds-aura-px: 92%; --tds-aura-py: -10%; }
.e-con.tds-aura-at-bl { --tds-aura-px: 8%; --tds-aura-py: 110%; }
.e-con.tds-aura-at-br { --tds-aura-px: 92%; --tds-aura-py: 110%; }
.e-con.tds-grid-on {
	--tds-grid-1: radial-gradient(70% 58% at 50% 20%, transparent 10%, var(--tds-bg) 100%);
	--tds-grid-2: linear-gradient(var(--tds-grid-line) 1px, transparent 1px);
	--tds-grid-3: linear-gradient(90deg, var(--tds-grid-line) 1px, transparent 1px);
}
.e-con:is([class*="tds-aura--"], .tds-grid-on) {
	background-image: var(--tds-aura-1, none), var(--tds-aura-2, none), var(--tds-grid-1, none), var(--tds-grid-2, none), var(--tds-grid-3, none);
	background-size: auto, auto, auto, 56px 56px, 56px 56px;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
	background-position: 0 0, 0 0, 0 0, center top, center top;
}

/* ── Píldora de navegación (header) ───────────────────────────────────
   El vidrio vive en ::after: si estuviera en el contenedor, el menú móvil
   (position: fixed) quedaría atrapado dentro de la píldora. */
.e-con.tds-navpill-on {
	position: relative;
	isolation: isolate;
	border-radius: var(--tds-radius-pill);
}
.e-con.tds-navpill-on::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background: rgb(20 18 46 / 0.66);
	border: 1px solid rgb(255 255 255 / 0.12);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	box-shadow: 0 14px 44px rgb(10 9 28 / 0.35);
	transition: background var(--tds-dur-enter) var(--tds-ease), box-shadow var(--tds-dur-enter) var(--tds-ease);
}
.e-con.tds-navpill-on.is-scrolled::after {
	background: rgb(16 14 38 / 0.88);
	box-shadow: 0 16px 50px rgb(10 9 28 / 0.5);
}

/* Barra de lectura (la crea tds-web.js dentro de la píldora) */
.tds-progress {
	position: absolute;
	inset-inline: 22px;
	bottom: 3px;
	height: 2px;
	pointer-events: none;
}
.tds-progress > span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: var(--tds-radius-pill);
	background: linear-gradient(90deg, var(--tds-blue-500), var(--tds-orange-400));
	transition: width 100ms linear;
}

/* ── Palabra resaltada en encabezados ─────────────────────────────── */
.tds-hl { color: var(--tds-highlight); }

/* ── Íconos Lucide (SVG de trazo): nunca relleno ─────────────────── */
.elementor svg.lucide,
.elementor-location-header svg.lucide,
.elementor-location-footer svg.lucide {
	fill: none !important;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Botones ──────────────────────────────────────────────────────── */
.elementor-button {
	transition: transform var(--tds-dur-base) var(--tds-ease), background-color var(--tds-dur-base) var(--tds-ease),
		color var(--tds-dur-base) var(--tds-ease), border-color var(--tds-dur-base) var(--tds-ease);
}
.elementor-button:hover { transform: translateY(-2px); }
.elementor-button:focus-visible { outline: none; box-shadow: var(--tds-shadow-focus); }

.elementor-widget-button.tds-style-ghost .elementor-button {
	background-color: transparent;
	color: var(--tds-text);
	border: 1px solid var(--tds-line-strong);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.elementor-widget-button.tds-style-ghost .elementor-button:is(:hover, :focus-visible) {
	background-color: transparent;
	color: var(--tds-accent-text);
	border-color: var(--tds-blue-500);
}
.elementor-widget-button.tds-style-light .elementor-button { background-color: var(--tds-gray-100); color: var(--tds-navy-700); }
.elementor-widget-button.tds-style-light .elementor-button:is(:hover, :focus-visible) { background-color: var(--tds-white); color: var(--tds-navy-700); }

/* ── Encabezados: etiquetas y manifiesto ──────────────────────────── */
.elementor-widget-heading:is(.tds-style-chip, .tds-style-chip-orange) .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: var(--tds-radius-pill);
	background: rgb(104 168 221 / 0.13);
	border: 1px solid rgb(104 168 221 / 0.4);
	color: var(--tds-accent-text);
	font-family: var(--tds-font-display);
	font-size: var(--tds-type-label-size);
	font-weight: var(--tds-type-label-weight);
	line-height: var(--tds-type-label-line);
	letter-spacing: var(--tds-type-label-tracking);
	text-transform: uppercase;
}
.elementor-widget-heading.tds-style-chip-orange .elementor-heading-title {
	background: rgb(203 80 37 / 0.1);
	border-color: rgb(203 80 37 / 0.38);
	color: var(--tds-highlight);
}
.elementor-widget-heading.tds-style-manifesto .elementor-heading-title {
	font-family: var(--tds-font-display);
	font-size: clamp(22px, 3.6vw, 38px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* ── Texto ────────────────────────────────────────────────────────── */
.elementor-widget-text-editor:is(.tds-style-dim, .tds-style-lead) { color: var(--tds-text-dim); }
.elementor-widget-text-editor.tds-style-lead {
	font-size: var(--tds-type-lead-size);
	line-height: var(--tds-type-lead-line);
}
.elementor-widget-text-editor:is(.tds-style-dim, .tds-style-lead) :is(b, strong) { color: var(--tds-text); font-weight: 600; }

/* ── Lista de íconos: sellos de confianza ─────────────────────────── */
.elementor-widget-icon-list.tds-style-trust .elementor-icon-list-items { row-gap: 12px; }
.elementor-widget-icon-list.tds-style-trust .elementor-icon-list-item {
	gap: 9px;
	padding: 10px 16px;
	border-radius: var(--tds-radius-pill);
	background: var(--tds-glass);
	border: 1px solid var(--tds-glass-border);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	box-shadow: var(--tds-shadow);
	font-size: 14px;
	line-height: 1.4;
}
.elementor-widget-icon-list.tds-style-trust .elementor-icon-list-text { color: var(--tds-text-dim); padding-inline-start: 0; }
.elementor-widget-icon-list.tds-style-trust .elementor-icon-list-text :is(b, strong) { color: var(--tds-text); font-weight: 600; }
.elementor-widget-icon-list.tds-style-trust .elementor-icon-list-icon { color: var(--tds-blue-500); }
.elementor-widget-icon-list.tds-style-trust .elementor-icon-list-item:nth-child(even) .elementor-icon-list-icon { color: var(--tds-orange-400); }
.elementor-widget-icon-list.tds-style-trust .elementor-icon-list-icon svg { width: 17px; height: 17px; }

/* ── Ticker ───────────────────────────────────────────────────────── */
.tds-ticker {
	position: relative;
	display: flex;
	align-items: center;
	height: 36px;
	overflow: hidden;
	background: linear-gradient(90deg, var(--tds-navy-950), var(--tds-navy-800) 50%, var(--tds-navy-950));
	border-bottom: 1px solid rgb(104 168 221 / 0.16);
}
.tds-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: tds-ticker var(--tds-ticker-duration, 42s) linear infinite;
}
.tds-ticker--left .tds-ticker__track { animation-direction: reverse; }
.tds-ticker:hover .tds-ticker__track { animation-play-state: paused; }
@keyframes tds-ticker {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}
.tds-ticker__item {
	padding: 0 22px;
	font-family: var(--tds-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgb(240 244 251 / 0.8);
}
.tds-ticker__sep { color: var(--tds-orange-400); font-size: 10px; }

/* ── Selector de idioma ───────────────────────────────────────────── */
.tds-lang {
	display: inline-flex;
	flex-shrink: 0;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: var(--tds-radius-pill);
	background: rgb(255 255 255 / 0.06);
}
.tds-lang .tds-lang__opt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	font-family: var(--tds-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgb(240 244 251 / 0.8);
	text-decoration: none;
	transition: background-color var(--tds-dur-base) var(--tds-ease), color var(--tds-dur-base) var(--tds-ease);
}
.tds-lang .tds-lang__opt:hover { color: var(--tds-white); }
.tds-lang .tds-lang__opt.is-active { background: var(--tds-orange-600); color: var(--tds-white); }
.tds-lang .tds-lang__opt:focus-visible { outline: none; box-shadow: inset var(--tds-shadow-focus); }
.tds-lang svg {
	flex-shrink: 0;
	width: 17px;
	height: 12px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
}
@media (max-width: 640px) {
	.tds-lang .tds-lang__opt { gap: 5px; padding: 6px 9px; }
}

/* ── Movimiento reducido: todo quieto y visible ───────────────────── */
@media (prefers-reduced-motion: reduce) {
	.tds-ticker__track { animation: none; }
	.elementor-button:hover { transform: none; }
	.tds-progress > span { transition: none; }
	.elementor-invisible { visibility: visible !important; }
	.elementor-element.animated { animation: none !important; }
}