/* =========================================================
   Digital ICON — Landing IA
   Hoja de estilos propia de la pagina landing-ia.
   Elementor sigue controlando texto/orden; aqui va lo visual
   (color, tipografia, gradientes, animaciones, layout fino).

   NOTA: este sitio ya trae Estilos Globales de Elementor propios
   (fuente + mayusculas + color de encabezados) configurados para
   el home anterior. Para que esta pagina se vea exactamente como
   se diseño sin tocar esos ajustes globales (que las demas paginas
   si necesitan), casi todo aqui usa !important de forma deliberada.

   Ronda "menu global" (2026-08-29): a pedido de Carlos, la pagina
   deja de traer header/footer propios (bloques HTML) y pasa a usar
   el template "Elementor Full Width" para que cargue el header/footer
   globales del tema (Max Mega Menu) -- necesario porque va a tener
   paginas internas y el menu debe ser consistente en todo el sitio.
   Se eliminan aqui todas las reglas que apuntaban a esos bloques
   (.dicon-header, .dicon-nav-links, .dicon-burger, .dicon-mobile-nav,
   .dicon-footer, .dicon-whatsapp-float): ya no existen en el HTML de
   la pagina, asi que el CSS quedaria muerto si se dejaba. El boton
   flotante de WhatsApp lo reemplaza Carlos por un chat en vivo aparte.

   Ronda 18 (2026-08-31): el footer/header globales de Elementor Theme
   Builder viven fuera de este plugin (Carlos los construye visualmente),
   pero como "landing-ia" ahora ES el Home, el body sigue llevando la
   clase .dicon-landing-body en esa pagina -- y las reglas genericas de
   tipografia/color de mas abajo (h1-h6, p, .elementor-widget-text-editor,
   etc, todas con !important) le "cazaban" el texto del footer tambien,
   pisando el blanco-sobre-morado que Carlos configuro ahi y dejandolo
   gris/morado casi invisible. Se excluye con
   ":not(:where(.elementor-location-footer, .elementor-location-header) *)"
   -- clase que Elementor Pro agrega automaticamente al contenedor de
   cualquier plantilla de Theme Builder -- para que esas reglas dejen de
   tocar el footer/header y su propio CSS (generado por Elementor a partir
   de lo que Carlos configuro visualmente) vuelva a mandar sin competencia.

   Ronda 18-fix (2026-08-31, mismo dia): la primera version de la exclusion
   de arriba usaba ":not(.elementor-location-footer *):not(.elementor-location-header *)"
   (dos :not() encadenados), lo cual sin querer LE SUBIA la especificidad a
   estas reglas base (cada :not() cuenta como una clase mas). Eso rompio el
   parrafo del hero y los textos de la seccion final (Carlos lo reporto:
   "quedaron en gris, deberian ser blancas") porque los overrides que ya
   existian para esos casos (".on-dark .dicon-lede", ".dicon-hero .dicon-lede",
   etc., pensados para ganarle a la regla base de 2 clases de siempre) dejaron
   de alcanzar contra la version ahora mas especifica. Fix: se envuelve el
   selector de exclusion en ":where(...)", que por definicion SIEMPRE tiene
   especificidad cero sin importar su contenido -- asi la exclusion sigue
   funcionando igual mientras la especificidad de estas reglas base vuelve a
   ser exactamente la de antes (y todos los overrides "on-dark" existentes
   vuelven a ganarles como ya venian ganando desde antes de la Ronda 18).
   Leccion para el futuro: cualquier ":not(...)" que se agregue a una regla ya
   existente para "excluir algo" hay que envolverlo en ":where(...)" si no se
   quiere alterar el balance de especificidad que el resto del archivo ya
   asume -- ":not()" normal SI suma especificidad, ":where()" no.

   Nota de archivo: el nombre cambia (landing-r18.css, landing-r19.css...)
   cada vez que hay un ajuste de diseno importante, a proposito: el
   CDN/cache de este hosting parecia ignorar el query string "?ver=" de
   cache-busting, asi que un nombre de archivo nuevo garantiza que se
   sirva el CSS mas reciente sin depender de que alguien limpie cache.
   ========================================================= */

:root{
	--dicon-purple:#703091;
	--dicon-purple-dark:#4A1F60;
	--dicon-purple-light:#9B5FC0;
	--dicon-orange:#F26C20;
	--dicon-orange-dark:#D45913;
	--dicon-orange-soft:#F79F6E;
	--dicon-ink:#141018;
	--dicon-ink-soft:#1F1826;
	--dicon-cream:#F7F5FA;
	--dicon-gray:#4A4553;
	--dicon-gray-light:#8A8394;
	--dicon-white:#FFFFFF;
	--dicon-font-display:'Big Noodle Titling', 'Arial Narrow', sans-serif;
	--dicon-font-condensed:'GT Walsheim Pro Condensed', 'GT Walsheim Pro', sans-serif;
	--dicon-font-body:'GT Walsheim Pro', -apple-system, BlinkMacSystemFont, sans-serif;
	--dicon-radius:20px;
	--dicon-shadow:0 20px 60px rgba(20,16,24,0.16);
	--dicon-max:1320px;
}

/* ---------- Reset + cascada base ---------- */
body.dicon-landing-body{ background:var(--dicon-white); }
.dicon-landing-body, .dicon-landing-body .elementor{
	font-family:var(--dicon-font-body);
	color:var(--dicon-gray);
	scroll-behavior:smooth;
}
.dicon-landing-body a{ text-decoration:none; }
.dicon-landing-body ul{ margin:0; padding:0; list-style:none; }
.dicon-landing-body section.elementor-section{ position:relative; overflow:hidden; }
.dicon-landing-body .dicon-center-row > .elementor-container{ justify-content:center; }
.dicon-landing-body img{ max-width:100%; height:auto; }

/* Ancho de contenido controlado en todas las secciones (evita que el texto
   se estire de borde a borde en monitores anchos). El fondo de cada seccion
   sigue siendo full-bleed; solo el contenido queda centrado y con un maximo. */
.dicon-landing-body .elementor-section .elementor-container{
	max-width:var(--dicon-max) !important;
	margin-left:auto !important;
	margin-right:auto !important;
	padding-left:40px;
	padding-right:40px;
	box-sizing:border-box;
}
@media(max-width:768px){
	.dicon-landing-body .elementor-section .elementor-container{
		padding-left:24px;
		padding-right:24px;
	}
}
@media(max-width:480px){
	.dicon-landing-body .elementor-section .elementor-container{
		padding-left:18px;
		padding-right:18px;
	}
}

/* Tipografia y color base: se fuerzan con !important porque los Estilos
   Globales de Elementor de este sitio (fuente condensada + mayusculas)
   ganan la cascada por defecto sobre cualquier widget sin ajuste propio.
   Se excluye el footer/header globales (ver nota de la Ronda 18 arriba)
   para no pisar el color propio que Carlos configuro ahi en Elementor. */
.dicon-landing-body h1:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body h2:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body h3:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body h4:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body h5:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body h6:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-heading-title:not(:where(.elementor-location-footer, .elementor-location-header) *){
	font-family:var(--dicon-font-body) !important;
	font-weight:900 !important;
	color:var(--dicon-purple) !important;
	letter-spacing:-0.01em;
	text-transform:none !important;
}
.dicon-landing-body p:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-widget-text-editor:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-icon-list-text:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-icon-box-title:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-icon-box-description:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-tab-content:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-field-textual:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-field-label:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-button:not(:where(.elementor-location-footer, .elementor-location-header) *){
	font-family:var(--dicon-font-body) !important;
	text-transform:none !important;
}
.dicon-landing-body p:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-widget-text-editor:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-icon-list-text:not(:where(.elementor-location-footer, .elementor-location-header) *),
.dicon-landing-body .elementor-icon-box-description:not(:where(.elementor-location-footer, .elementor-location-header) *){
	color:var(--dicon-gray) !important;
	font-weight:400 !important;
}
.dicon-landing-body .elementor-icon-box-title:not(:where(.elementor-location-footer, .elementor-location-header) *){
	font-family:var(--dicon-font-body) !important;
	font-weight:900 !important;
	color:var(--dicon-purple) !important;
	text-transform:none !important;
}

/* ---------- utilidades ---------- */
.dicon-eyebrow{
	display:inline-flex !important;
	align-items:center;
	gap:8px;
	font-family:var(--dicon-font-condensed) !important;
	font-weight:700 !important;
	letter-spacing:0.12em;
	text-transform:uppercase !important;
	font-size:13px;
	color:#fff !important;
	background:var(--dicon-orange);
	border:none;
	padding:8px 18px;
	border-radius:999px;
	margin-bottom:18px;
	box-shadow:0 8px 20px rgba(242,108,32,0.3);
}
.dicon-eyebrow.on-dark{ color:#fff !important; background:var(--dicon-orange); border:none; }

.dicon-h2{
	font-size:clamp(28px,4vw,44px) !important;
	line-height:1.15 !important;
	margin:0 0 18px !important;
}
.dicon-h2 .accent{ color:var(--dicon-orange) !important; }
.dicon-lede{
	font-size:18px !important;
	line-height:1.7 !important;
	color:var(--dicon-gray) !important;
	max-width:640px;
	font-weight:400 !important;
}
.on-dark .dicon-h2{ color:var(--dicon-white) !important; }
.on-dark .dicon-lede{ color:rgba(255,255,255,0.72) !important; }
.on-dark .elementor-icon-list-text{ color:rgba(255,255,255,0.85) !important; }
.on-dark .elementor-icon-list-icon i{ color:var(--dicon-orange-soft) !important; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.dicon-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	font-family:var(--dicon-font-condensed) !important;
	font-weight:700 !important;
	font-size:16px;
	letter-spacing:0.02em;
	padding:16px 30px;
	border-radius:999px;
	transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
	border:2px solid transparent;
	cursor:pointer;
	text-transform:none !important;
}
.dicon-btn.solid{
	background:linear-gradient(135deg, var(--dicon-orange) 0%, var(--dicon-orange-dark) 100%);
	color:var(--dicon-white) !important;
	box-shadow:0 12px 30px rgba(242,108,32,0.35);
}
.dicon-btn.solid:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(242,108,32,0.45); color:var(--dicon-white) !important; }
.dicon-btn.outline{
	background:transparent;
	border-color:rgba(255,255,255,0.4);
	color:var(--dicon-white) !important;
}
.dicon-btn.outline:hover{ background:rgba(255,255,255,0.1); transform:translateY(-3px); color:var(--dicon-white) !important; }
.dicon-btn.outline.on-light{ border-color:rgba(20,16,24,0.2); color:var(--dicon-ink) !important; }
.dicon-btn.outline.on-light:hover{ background:rgba(20,16,24,0.05); color:var(--dicon-ink) !important; }
.dicon-btn.whatsapp{
	background:#25D366; color:#fff !important; box-shadow:0 12px 30px rgba(37,211,102,0.35);
}
.dicon-btn.whatsapp:hover{ transform:translateY(-3px); color:#fff !important; }

.dicon-animate{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.dicon-animate.is-visible{ opacity:1; transform:translateY(0); }
.dicon-animate.d1{ transition-delay:.08s; }
.dicon-animate.d2{ transition-delay:.16s; }
.dicon-animate.d3{ transition-delay:.24s; }
.dicon-animate.d4{ transition-delay:.32s; }
.dicon-animate.d5{ transition-delay:.4s; }
.dicon-animate.d6{ transition-delay:.48s; }

/* ---------- Hero ---------- */
.dicon-hero{
	background:linear-gradient(135deg, var(--dicon-purple) 0%, var(--dicon-purple-dark) 100%);
	padding-top:64px !important;
	padding-bottom:70px !important;
}
.dicon-hero:before{
	content:"";
	position:absolute; inset:0;
	background-image:url('../pattern-arcs.png');
	background-size:420px;
	opacity:0.06;
	mix-blend-mode:overlay;
	pointer-events:none;
}
/* El fix quirurgico (min-width:0 en la columna) no fue suficiente: algo en
   la cadena de wrappers de Elementor entre la columna y el widget seguia
   permitiendo el desborde. En vez de seguir adivinando en que nivel exacto
   esta el problema, se fuerza un layout de CSS Grid explicito para esta
   fila del hero — mas predecible, ignora cualquier ancho inline que
   Elementor haya puesto, y no depende del comportamiento de flexbox. */
.dicon-hero .elementor-container{
	display:grid !important;
	grid-template-columns:45fr 55fr;
	column-gap:40px;
	align-items:center;
}
.dicon-hero .elementor-container > .elementor-column{
	width:100% !important;
	max-width:none !important;
	min-width:0 !important;
}
.dicon-hero .elementor-column .elementor-widget-wrap,
.dicon-hero .elementor-column .elementor-widget-html,
.dicon-hero .elementor-column .elementor-widget-container{
	min-width:0 !important;
	max-width:100% !important;
}
/* #dicon-hero-title (CSS ID, maxima especificidad): el titulo del hero se
   veia con texto oscuro/casi invisible porque el sitio ya trae un estilo
   global de Elementor para encabezados que, en empate de especificidad,
   ganaba incluso con !important. Un selector por ID no tiene competencia. */
#dicon-hero-title .elementor-heading-title,
.dicon-hero h1{
	color:var(--dicon-white) !important;
	font-size:clamp(30px,4.4vw,50px) !important;
	line-height:1.1 !important;
	font-weight:900 !important;
	letter-spacing:-0.015em;
	margin:0 0 22px !important;
}
#dicon-hero-title .accent,
.dicon-hero h1 .accent{
	background:linear-gradient(120deg, var(--dicon-orange-soft), var(--dicon-orange));
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.dicon-hero .dicon-lede{ color:rgba(255,255,255,0.75) !important; max-width:560px; }
.dicon-hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.dicon-trust-strip{
	margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.12);
	display:flex; gap:16px 28px; flex-wrap:wrap;
}
.dicon-trust-strip .item{
	display:flex; align-items:center; gap:8px;
	font-family:var(--dicon-font-condensed); font-size:13px; letter-spacing:0.03em;
	color:rgba(255,255,255,0.65); text-transform:uppercase;
}
.dicon-trust-strip .item i{ color:var(--dicon-orange-soft); }

/* mockup de chat flotante en el hero: fondo blanco y mas ancho (para que el
   hero no se alargue tanto en vertical), segun feedback de Carlos */
.dicon-chat-mock{
	position:relative;
	box-sizing:border-box;
	background:#fff;
	border:1px solid rgba(20,16,24,0.06);
	border-radius:24px;
	padding:22px;
	max-width:540px;
	width:100%;
	margin:0 0 0 auto;
	box-shadow:0 30px 80px rgba(20,8,32,0.35);
	animation:dicon-float 5s ease-in-out infinite;
}
@keyframes dicon-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.dicon-chat-mock .head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(20,16,24,0.08); }
.dicon-chat-mock .head .dot{ width:10px; height:10px; border-radius:50%; background:#25D366; box-shadow:0 0 0 4px rgba(37,211,102,0.15); }
.dicon-chat-mock .head span{ font-family:var(--dicon-font-condensed); font-weight:700; color:var(--dicon-purple); font-size:14px; letter-spacing:.02em; }
.dicon-chat-mock .bubble{
	font-size:13.5px; line-height:1.5; padding:12px 15px; border-radius:16px; margin-bottom:10px; max-width:88%;
}
.dicon-chat-mock .bubble.in{ background:var(--dicon-cream); color:var(--dicon-ink); border-bottom-left-radius:4px; }
.dicon-chat-mock .bubble.out{ background:linear-gradient(135deg, var(--dicon-orange), var(--dicon-orange-dark)); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.dicon-chat-mock .typing{ display:inline-flex; gap:4px; padding:4px 0; }
.dicon-chat-mock .typing span{ width:6px; height:6px; border-radius:50%; background:var(--dicon-gray-light); animation:dicon-blink 1.2s infinite; }
.dicon-chat-mock .typing span:nth-child(2){ animation-delay:.2s; }
.dicon-chat-mock .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes dicon-blink{ 0%,80%,100%{ opacity:.3;} 40%{ opacity:1;} }

/* ---------- Stats / dolor ---------- */
.dicon-stats{ background:var(--dicon-cream); padding:70px 0 !important; }
.dicon-stat{ flex:1 1 220px; text-align:center; padding:20px; border-right:1px solid rgba(20,16,24,0.08); }
.dicon-stat:last-child{ border-right:none; }
.dicon-stat-num .elementor-heading-title{
	font-family:var(--dicon-font-display) !important; font-size:56px !important; line-height:1 !important;
	color:var(--dicon-purple) !important; font-weight:400 !important; text-transform:none !important; display:block;
}
.dicon-stat-label p{ font-size:14.5px !important; color:var(--dicon-gray) !important; max-width:220px; margin:0 auto; }

/* ---------- Problema / Solucion ---------- */
.dicon-compare-wrap > .elementor-container{ gap:26px; align-items:stretch; }
.dicon-compare-card{
	flex:1 1 320px; border-radius:18px; padding:34px 30px;
	background:#fff; border:1px solid rgba(20,16,24,0.06);
	box-shadow:0 10px 30px rgba(20,16,24,0.05);
	border-left:4px solid var(--dicon-orange);
}
.dicon-compare-card.after{ border-left-color:var(--dicon-purple); }
.dicon-compare-card h4.elementor-heading-title{ font-family:var(--dicon-font-condensed) !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.1em; text-transform:uppercase !important; margin:0 0 18px !important; }
.dicon-compare-card.before h4.elementor-heading-title{ color:var(--dicon-orange-dark) !important; }
.dicon-compare-card.after h4.elementor-heading-title{ color:var(--dicon-purple) !important; }
.dicon-compare-card .elementor-icon-list-item{ padding:10px 0 !important; border-bottom:1px dashed rgba(0,0,0,0.1); }
.dicon-compare-card .elementor-icon-list-item:last-child{ border-bottom:none; }
.dicon-compare-card.before .elementor-icon-list-icon i{ color:var(--dicon-orange-dark) !important; }
.dicon-compare-card.after .elementor-icon-list-icon i{ color:var(--dicon-purple) !important; }
.dicon-compare-card .elementor-icon-list-text{ font-size:15px !important; line-height:1.5; }
.dicon-compare-card .elementor-icon-list-text{ color:var(--dicon-gray) !important; }

/* ---------- Capacidades (icon-box nativos de Elementor) ---------- */
.dicon-capabilities .elementor-container{ align-items:stretch; }
.dicon-capabilities .elementor-column{ padding:12px; display:flex; }
.dicon-capabilities .elementor-widget-icon-box{
	background:#fff; border:1px solid rgba(20,16,24,0.06); border-radius:18px; padding:34px 28px;
	box-shadow:0 10px 30px rgba(20,16,24,0.05);
	transition:transform .25s ease, box-shadow .25s ease;
	border-top:3px solid var(--dicon-orange);
	width:100%;
}
.dicon-capabilities .elementor-widget-icon-box:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(20,16,24,0.12); }
.dicon-capabilities .elementor-icon-box-icon{
	background:none; width:auto; height:auto; margin-bottom:16px;
}
.dicon-capabilities .elementor-icon-box-icon i{ color:var(--dicon-purple) !important; font-size:38px; }
.dicon-capabilities .elementor-icon-box-title{ font-size:19px !important; margin:0 0 8px !important; }
.dicon-capabilities .elementor-icon-box-description{ font-size:14.5px !important; line-height:1.6; }

/* ---------- Proceso ---------- */
/* El titulo y la fila 01-04 son 2 secciones separadas que comparten la
   misma clase (80px arriba y abajo cada una = ~160px de hueco entre
   ellas); se les da padding independiente para acortar solo ese espacio
   de en medio, sin tocar el margen contra las secciones vecinas. */
.dicon-process{ background:var(--dicon-cream); position:relative; }
.dicon-process.dicon-process-intro{ padding:80px 0 16px !important; }
.dicon-process.dicon-process-steps{ padding:16px 0 80px !important; }
.dicon-process .elementor-column{ padding:12px; }
.dicon-step-num .elementor-heading-title{
	font-family:var(--dicon-font-display) !important; font-weight:400 !important; font-style:normal; font-size:44px !important;
	color:var(--dicon-orange) !important; display:block; margin-bottom:10px !important; text-transform:none !important;
}
.dicon-step-title .elementor-heading-title{ color:var(--dicon-purple) !important; font-size:17px !important; margin:0 0 10px !important; }
.dicon-process .elementor-widget-text-editor p{ color:var(--dicon-gray) !important; font-size:14px !important; line-height:1.6; }

/* ---------- Canales (icon-list en linea, estilo pill) ---------- */
.dicon-channels .elementor-icon-list-items{ display:flex; flex-wrap:wrap; gap:14px; }
.dicon-channels .elementor-icon-list-item{
	display:flex; align-items:center; gap:10px;
	background:#fff; border:1px solid rgba(20,16,24,0.08); border-radius:999px; padding:12px 22px;
	box-shadow:0 8px 20px rgba(20,16,24,0.05);
}
.dicon-channels .elementor-icon-list-text{ font-family:var(--dicon-font-condensed) !important; font-weight:700 !important; font-size:14px !important; color:var(--dicon-ink) !important; }
.dicon-channels .elementor-icon-list-icon i{ color:var(--dicon-orange) !important; font-size:18px; }

/* ---------- Precios ---------- */
.dicon-pricing,
.dicon-price-group-title-wrap,
.dicon-price-group{
	background:var(--dicon-white);
}
.dicon-pricing{ padding:90px 0 40px !important; }
.dicon-price-group{ margin-bottom:0; padding:0 0 52px; }
.dicon-price-group-title .elementor-heading-title{
	font-family:var(--dicon-font-condensed) !important; text-transform:uppercase !important; letter-spacing:.08em; font-size:14px !important;
	font-weight:700 !important; color:var(--dicon-purple) !important;
}
.dicon-price-group-title-wrap{ padding:0 !important; }
.dicon-price-group-title-wrap .elementor-container{ padding-bottom:16px; border-bottom:1px solid rgba(20,16,24,0.1); margin-bottom:26px; }
.dicon-price-group > .elementor-container{ gap:24px; align-items:stretch; }

/* Tarjetas compactas: blancas con acentos de marca por defecto, y la
   destacada en naranja solido — mismo espiritu que las tarjetas del sitio
   actual (mas chicas y menos "pesadas" visualmente que la version anterior). */
.dicon-price-card{
	flex:1 1 240px; max-width:300px; background:#fff; border:1px solid rgba(20,16,24,0.08);
	border-radius:16px; padding:22px; position:relative; transition:transform .2s ease, box-shadow .2s ease;
	min-height:100%; box-shadow:0 10px 26px rgba(20,16,24,0.06);
}
.dicon-price-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(20,16,24,0.1); }
.dicon-price-card.featured{
	background:var(--dicon-orange);
	border-color:transparent;
	box-shadow:0 16px 34px rgba(242,108,32,0.32);
}
/* #dicon-featured-card (ID): mismo caso otra vez — el texto de la tarjeta
   destacada se veia morado sobre naranja porque el Estilo Global del sitio
   empataba en especificidad con ".featured". Con ID gana siempre. */
#dicon-featured-card .elementor-heading-title{ color:#fff !important; }
#dicon-featured-card .dicon-plan-price-note .elementor-heading-title{ color:rgba(255,255,255,0.7) !important; }
#dicon-featured-card .dicon-ribbon .elementor-heading-title{ background:#fff !important; color:var(--dicon-orange-dark) !important; }
.dicon-price-card .dicon-plan-name .elementor-heading-title{
	font-family:var(--dicon-font-body) !important; font-size:19px !important; font-weight:900 !important;
	color:var(--dicon-purple) !important; letter-spacing:-0.01em; line-height:1.2 !important;
}
.dicon-price-card.featured .dicon-plan-name .elementor-heading-title{ color:#fff !important; }
.dicon-price-card .dicon-plan-desc .elementor-heading-title{
	font-family:var(--dicon-font-body) !important; font-weight:400 !important; font-size:12.5px !important; color:var(--dicon-gray-light) !important; line-height:1.4 !important; margin-top:4px !important;
}
.dicon-price-card.featured .dicon-plan-desc .elementor-heading-title{ color:rgba(255,255,255,0.75) !important; }
.dicon-price-card .dicon-plan-price .elementor-heading-title{
	font-family:var(--dicon-font-body) !important; font-weight:900 !important; font-size:23px !important; color:var(--dicon-ink) !important; margin-top:14px !important;
}
.dicon-price-card.featured .dicon-plan-price .elementor-heading-title{ color:#fff !important; }
.dicon-price-card .dicon-plan-price-note .elementor-heading-title{
	font-family:var(--dicon-font-condensed) !important; font-size:10.5px !important; text-transform:uppercase !important; letter-spacing:.05em; color:var(--dicon-gray-light) !important; font-weight:700 !important; margin-bottom:14px !important;
}
.dicon-price-card.featured .dicon-plan-price-note .elementor-heading-title{ color:rgba(255,255,255,0.65) !important; }
.dicon-price-card .elementor-icon-list-item{ padding:5px 0 !important; }
.dicon-price-card .elementor-icon-list-text{ font-size:12.5px !important; color:var(--dicon-gray) !important; line-height:1.35 !important; }
.dicon-price-card.featured .elementor-icon-list-text{ color:#fff !important; }
.dicon-price-card .elementor-icon-list-icon i{ color:var(--dicon-orange) !important; font-size:13px; }
/* Tarjeta destacada: checks en circulo blanco con icono morado, como pidio Carlos */
.dicon-price-card.featured .elementor-icon-list-icon{
	background:#fff; border-radius:50%; width:18px; height:18px;
	display:inline-flex; align-items:center; justify-content:center;
}
.dicon-price-card.featured .elementor-icon-list-icon i{ color:var(--dicon-purple) !important; font-size:10px; }
.dicon-price-card .elementor-widget-icon-list{ margin:12px 0 16px; }
.dicon-price-card .elementor-widget-button{ margin-top:6px; }
.dicon-price-card .elementor-button{
	width:100%; background:var(--dicon-orange) !important; border:none !important; border-radius:999px !important;
	font-family:var(--dicon-font-condensed) !important; font-weight:700 !important; font-size:13px !important;
	color:#fff !important; padding:11px 16px !important;
}
.dicon-price-card.featured .elementor-button{
	background:#fff !important; color:var(--dicon-orange-dark) !important;
}
.dicon-price-card .dicon-ribbon{ position:absolute; top:-12px; right:18px; z-index:2; }
.dicon-price-card .dicon-ribbon .elementor-heading-title{
	background:var(--dicon-purple) !important; color:#fff !important;
	font-family:var(--dicon-font-condensed) !important; font-size:10px !important; letter-spacing:.06em; text-transform:uppercase !important;
	padding:5px 12px !important; border-radius:999px; font-weight:700 !important; display:inline-block;
}

/* ---------- Confianza (icon-box nativos) ---------- */
.dicon-trust .elementor-column{ padding:12px; }
.dicon-trust .elementor-widget-icon-box{ text-align:center; padding:20px; }
.dicon-trust .elementor-icon-box-icon{ display:flex; justify-content:center; margin-bottom:14px; }
.dicon-trust .elementor-icon-box-icon i{ font-size:30px; color:var(--dicon-purple) !important; }
.dicon-trust .elementor-icon-box-title{ font-size:15.5px !important; margin:0 0 8px !important; }
.dicon-trust .elementor-icon-box-description{ font-size:13px !important; color:var(--dicon-gray-light) !important; line-height:1.5; }

/* ---------- FAQ ----------
   El widget "accordion" nativo de Elementor vuelve a usarse (para que quede
   editable visualmente); el color/tipografia se fuerza via "Custom CSS"
   (Advanced tab del propio widget en elementor-content.php), que es el
   mecanismo de Elementor Pro pensado para esto — no via clases aqui. */

/* ---------- CTA final + formulario ---------- */
.dicon-final{
	background:linear-gradient(135deg, var(--dicon-purple) 0%, var(--dicon-purple-dark) 100%);
	padding:90px 0 !important; position:relative;
}
.dicon-final:before{
	content:""; position:absolute; inset:0;
	background:radial-gradient(45% 60% at 90% 15%, rgba(242,108,32,0.28), transparent 60%);
}
.dicon-final .elementor-container{ align-items:center; }
/* #dicon-final-title (ID): mismo caso que el hero — el H2 se veia morado
   sobre morado (casi invisible) porque el Estilo Global del sitio empataba
   con la regla de clase. Con ID gana sin ambiguedad. */
#dicon-final-title .elementor-heading-title{ color:#fff !important; }
.dicon-final .elementor-icon-list-icon{
	background:#fff; border-radius:50%; width:18px; height:18px;
	display:inline-flex; align-items:center; justify-content:center;
}
.dicon-final .elementor-icon-list-icon i{ color:var(--dicon-purple) !important; font-size:10px; }
.dicon-form-card{
	background:rgba(255,255,255,0.97); border-radius:22px; padding:38px; box-shadow:0 30px 80px rgba(0,0,0,0.35);
	position:relative;
}
.dicon-form-card h3.elementor-heading-title{ font-size:20px !important; margin:0 0 4px !important; color:var(--dicon-purple) !important; }
.dicon-form-card .sub{ font-size:13.5px !important; color:var(--dicon-gray-light) !important; margin-bottom:22px !important; }

.dicon-form-card .elementor-field-group{ margin-bottom:14px !important; }
.dicon-form-card .elementor-field-textual{
	border:1px solid rgba(20,16,24,0.14) !important; border-radius:10px !important; padding:13px 16px !important;
	font-size:14.5px !important; background:#fff !important; color:var(--dicon-ink) !important;
}
.dicon-form-card .elementor-field-textual:focus{ border-color:var(--dicon-orange) !important; box-shadow:0 0 0 3px rgba(242,108,32,0.14) !important; }
.dicon-form-card .elementor-field-label{ font-size:12.5px !important; font-weight:700 !important; color:var(--dicon-gray) !important; letter-spacing:.03em; }
.dicon-form-card .elementor-button{
	background:linear-gradient(135deg, var(--dicon-orange), var(--dicon-orange-dark)) !important; border-radius:999px !important;
	font-weight:700 !important; letter-spacing:.02em !important;
	padding:16px !important; width:100%; border:none !important; color:#fff !important;
}
.dicon-form-card select.elementor-field-textual{ appearance:auto; }
.dicon-field-honeypot{ position:absolute !important; left:-9999px !important; opacity:0; }

/* ---------- Responsive ---------- */
@media(max-width:1024px){
	.dicon-stat{ border-right:none; border-bottom:1px solid rgba(20,16,24,0.08); flex:1 1 45%; }
	/* El grid del hero (45fr 55fr) es fijo para desktop; sin este reset se
	   quedaba con las 2 columnas lado a lado, muy angostas, en cualquier
	   pantalla mas chica -- causa raiz de casi todos los problemas visuales
	   de movil reportados por Carlos (texto partido, mockup apachurrado). */
	.dicon-hero .elementor-container{ grid-template-columns:1fr !important; }
	.dicon-hero .elementor-column:nth-child(2){ margin-top:40px; }
}
@media(max-width:767px){
	.dicon-compare-wrap > .elementor-container{ flex-direction:column; }
	.dicon-stat{ flex:1 1 100%; }
	.dicon-chat-mock{ margin:36px auto 0; max-width:100%; }
	/* Mismo selector (ID + clase) que la regla base: si solo se apunta por
	   ".dicon-hero h1", pierde el empate de especificidad contra la regla
	   base "#dicon-hero-title .elementor-heading-title" y este override
	   nunca se aplicaba de verdad en movil -- el titulo se quedaba en el
	   tamano de escritorio (o el minimo del clamp, ya de por si grande para
	   una columna angosta). */
	#dicon-hero-title .elementor-heading-title,
	.dicon-hero h1{ font-size:clamp(26px,7.5vw,32px) !important; }
	.dicon-price-card{ flex:1 1 100%; }
}
@media(max-width:767px){
	/* border-radius:999px (pensado para texto en una sola linea) convierte
	   estos elementos en manchas/circulos cuando el texto envuelve a varias
	   lineas en pantallas angostas -- se acota a un radio fijo razonable. */
	.dicon-eyebrow{ border-radius:14px; }
	.dicon-btn{ border-radius:14px; }
}
@media(max-width:480px){
	.dicon-eyebrow{ font-size:11px; padding:6px 12px; }
	.dicon-btn{ width:100%; }
	.dicon-hero-ctas{ flex-direction:column; }
	.dicon-hero-ctas .dicon-btn{ width:100%; }
}

/* ---------- Campo de aceptacion (consentimiento datos, Ley 1581/2012) ---------- */
.dicon-form-card .elementor-field-type-acceptance .elementor-field-label,
.dicon-form-card .elementor-field-subgroup label{
	font-size:12.5px !important; font-weight:400 !important; color:var(--dicon-gray) !important;
	letter-spacing:normal !important; text-transform:none !important; line-height:1.5;
}
.dicon-form-card .elementor-field-type-acceptance a,
.dicon-form-card .elementor-field-subgroup a{ color:var(--dicon-purple) !important; text-decoration:underline !important; }
.dicon-form-card .elementor-field-type-acceptance{ display:flex; align-items:flex-start; gap:8px; margin-bottom:6px !important; }