/* Up To Marketing · home oscura. Generado desde la maqueta 'La recomendacion'.
   Todo va acotado a #utm-home para no afectar al resto del sitio. */

/* ============================================================
   Up To Marketing · maqueta de home "La recomendación"
   Mundo visual único y deliberado: oscuro. El violeta no es
   relleno, es fuente de luz. Todo se pinta explícito para que
   la página aguante sobre cualquier fondo del visor.
   ============================================================ */
:root{
  --fondo:#0C0918;
  --fondo-2:#120D22;
  --superficie:#191231;
  --superficie-alta:#221839;
  --borde:#2D2350;
  --borde-luz:#4A3A85;

  --violeta:#7C4DFF;      /* luz */
  --violeta-hondo:#5B2EEA; /* marca */
  --lima:#CDF23C;
  --lima-ink:#1C2400;
  --cian:#3DD8F0;
  --coral:#FF6A55;

  --texto:#F2EFFB;
  --texto-2:#A79FC7;
  --texto-3:#6F678F;

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --display:Sora,Georgia,serif;
  --cuerpo:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* La home vive dentro de #utm-home: nada de esto se escapa al resto del sitio. */
body.utm-home-oscura{ background:var(--fondo); }
#utm-home{
  background:var(--fondo); color:var(--texto);
  font-family:var(--cuerpo); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
#utm-home .wrap{max-width:1180px; margin:0 auto; padding:0 28px}

/* ============================================================
   HERO · la escena
   ============================================================ */
#utm-home .hero{position:relative; overflow:hidden; padding-bottom:38px}
/* fuente de luz: dos radiales, sin imagen, coste cero */
#utm-home .hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:150%;
  background:
    radial-gradient(50% 46% at 60% 40%, rgba(124,77,255,.44) 0%, rgba(124,77,255,0) 70%),
    radial-gradient(38% 34% at 18% 8%,  rgba(61,216,240,.16) 0%, rgba(61,216,240,0) 70%);
  pointer-events:none;
}
/* rejilla tenue: da suelo y escala, 1 gradiente */
#utm-home .hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(76% 68% at 50% 38%, #000 0%, transparent 80%);
  pointer-events:none;
}
#utm-home .hero-in{position:relative; z-index:2; padding-top:52px}
#utm-home .hero-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:52px; align-items:center;
}
#utm-home .hero-col{max-width:none}
@media(max-width:980px){
  #utm-home .hero-grid{grid-template-columns:1fr; gap:38px}
}

#utm-home .eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cian); margin:0 0 26px;
  display:flex; align-items:center; gap:10px;
}
#utm-home .eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--cian); box-shadow:0 0 12px var(--cian);
  animation:latido 2.6s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- panel del asistente: el objeto con profundidad real ---- */
#utm-home .escena{max-width:none; margin-top:0}
#utm-home .panel{
  background:linear-gradient(168deg, var(--superficie-alta) 0%, var(--superficie) 100%);
  border:1px solid var(--borde-luz);
  border-radius:16px;
  padding:0 0 30px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 30px 80px -16px rgba(0,0,0,.92),
    0 0 130px -26px rgba(124,77,255,.8);
}
#utm-home .panel-top{
  display:flex; align-items:center; gap:9px;
  padding:13px 18px; border-bottom:1px solid var(--borde);
  font-family:var(--mono); font-size:11px; color:var(--texto-3); letter-spacing:.04em;
}
#utm-home .punto{width:9px; height:9px; border-radius:50%; background:#3A2F5E}
#utm-home .panel-top b{margin-left:auto; font-weight:400; color:var(--texto-3)}

#utm-home .turno{padding:22px 24px 0}
#utm-home .rol{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-3); margin:0 0 9px;
}
#utm-home .pregunta{
  margin:0; font-size:.97rem; color:var(--texto-2);
  border-left:2px solid var(--borde-luz); padding-left:14px;
}
#utm-home .respuesta{
  margin:0; font-size:1.06rem; line-height:1.55; color:var(--texto);
  border-left:2px solid var(--violeta); padding-left:14px;
}
#utm-home .respuesta .w{opacity:0; animation:aparece .42s ease forwards}
@keyframes aparece{to{opacity:1}}
/* la marca se enciende */
#utm-home .enciende{
  color:var(--lima); font-weight:700;
  text-shadow:0 0 0 rgba(205,242,60,0);
  animation:aparece .42s ease forwards, prende 1.5s ease 2.3s forwards;
}
@keyframes prende{
  40%{text-shadow:0 0 26px rgba(205,242,60,.85)}
  100%{text-shadow:0 0 12px rgba(205,242,60,.45)}
}
#utm-home .cursor{
  display:inline-block; width:9px; height:1.05em; vertical-align:-2px;
  background:var(--lima); margin-left:3px;
  animation:parpadeo 1s steps(2,start) infinite;
}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:0}}

/* ---- claim y acciones: SIEMPRE visibles, sin animar ---- */
#utm-home .claim{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,5.2vw,3.5rem); line-height:1.06;
  letter-spacing:-.03em; margin:0 0 20px; max-width:22ch;
  text-wrap:balance;
}
#utm-home .claim em{font-style:normal; color:var(--violeta)}
#utm-home .bajada{font-size:1.04rem; color:var(--texto-2); max-width:46ch; margin:0 0 28px}
#utm-home .acciones{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
#utm-home .btn{
  font-family:var(--cuerpo); font-weight:700; font-size:15px;
  padding:14px 24px; border-radius:9px; text-decoration:none;
  display:inline-block; transition:transform .16s ease, box-shadow .16s ease;
}
#utm-home .btn-1{background:var(--lima); color:var(--lima-ink); box-shadow:0 0 34px -8px rgba(205,242,60,.5)}
#utm-home .btn-1:hover{transform:translateY(-2px); box-shadow:0 0 46px -6px rgba(205,242,60,.7)}
#utm-home .btn-2{background:transparent; color:var(--texto); border:1px solid var(--borde-luz)}
#utm-home .btn-2:hover{border-color:var(--violeta); transform:translateY(-2px)}
#utm-home .nota{font-family:var(--mono); font-size:11.5px; color:var(--texto-3); margin:22px 0 0; line-height:1.6}

/* ============================================================
   CIFRAS · sin cajas. La escala ES el diseño.
   ============================================================ */
#utm-home .cifras{border-top:1px solid var(--borde); background:var(--fondo-2)}
#utm-home .cifras-in{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:62px 28px;
}
#utm-home .cifra{padding:0 28px; border-left:1px solid var(--borde)}
#utm-home .cifra:last-child{padding-right:0}
#utm-home .cifra:first-child{border-left:none; padding-left:0}
#utm-home .cifra .n{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1;
  letter-spacing:-.03em; color:var(--texto);
  font-variant-numeric:tabular-nums; margin:0 0 12px;
}
#utm-home .cifra .n.luz{color:var(--violeta)}
#utm-home .cifra .l{font-size:13.5px; color:var(--texto-2); line-height:1.5; margin:0}
#utm-home .cifra .f{font-family:var(--mono); font-size:10.5px; color:var(--texto-3); margin:9px 0 0}
@media(max-width:860px){
  #utm-home .cifras-in{grid-template-columns:repeat(2,1fr); gap:36px 0}
  #utm-home .cifra:nth-child(3){border-left:none; padding-left:0}
}
@media(max-width:520px){
  #utm-home .cifras-in{grid-template-columns:1fr; gap:30px}
  #utm-home .cifra{border-left:none; padding-left:0}
}

/* ============================================================
   SECCIONES
   ============================================================ */
#utm-home section{border-top:1px solid var(--borde)}
/* .wrap es una clase y vence a `section` por especificidad: el padding vertical
   de las secciones hay que declararlo con la misma especificidad o mas. */
#utm-home section.wrap{padding:100px 28px}
#utm-home section:not(.wrap){padding:100px 0}
#utm-home .h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.15rem); line-height:1.14;
  letter-spacing:-.024em; margin:0 0 16px; max-width:26ch; text-wrap:balance;
}
#utm-home .dek{font-size:1.04rem; color:var(--texto-2); max-width:56ch; margin:0 0 42px}
#utm-home .rotulo{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violeta); margin:0 0 18px;
}

/* ---- qué hacemos: filas con regla, no tarjetas ---- */
#utm-home .filas{border-top:1px solid var(--borde)}
#utm-home .fila{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;
  gap:24px; align-items:baseline;
  padding:26px 20px; border-bottom:1px solid var(--borde);
  border-radius:8px;
  transition:background .2s ease;
}
/* la fila se ilumina al pasar: necesita aire propio o el texto toca el borde.
   Los 20px de padding se compensan con margenes negativos para que las reglas
   sigan alineadas con el resto de la columna. */
#utm-home .filas{margin:0 -20px}
#utm-home .fila{margin:0}
#utm-home .fila:hover{background:rgba(124,77,255,.07)}
#utm-home .fila:last-child{border-bottom:none}
#utm-home .fila h3{
  font-family:var(--display); font-weight:600; font-size:1.06rem;
  margin:0; letter-spacing:-.012em;
}
#utm-home .fila p{margin:0; color:var(--texto-2); font-size:15px}
#utm-home .fila .idx{font-family:var(--mono); font-size:11px; color:var(--texto-3)}
@media(max-width:760px){
  #utm-home .fila{grid-template-columns:1fr; gap:8px}
  #utm-home .fila .idx{order:-1}
}
@media(max-width:560px){
  #utm-home .panel-top b{display:none}
  #utm-home .acciones{flex-direction:column; align-items:stretch}
  #utm-home .btn{text-align:center}
}

/* ---- observatorio: el dato como espectáculo ---- */
#utm-home .obs{
  margin:8px 0;
  background:linear-gradient(150deg, rgba(124,77,255,.13) 0%, rgba(12,9,24,0) 62%);
  border:1px solid var(--borde-luz); border-radius:18px;
  padding:46px 44px; position:relative; overflow:hidden;
}
#utm-home .obs::before{
  content:""; position:absolute; right:-14%; top:-40%; width:56%; height:180%;
  background:radial-gradient(circle at 50% 50%, rgba(124,77,255,.3) 0%, transparent 66%);
  pointer-events:none;
}
#utm-home .obs-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
@media(max-width:800px){#utm-home .obs-grid{grid-template-columns:1fr; gap:34px}}
#utm-home .gran{
  font-family:var(--display); font-weight:700;
  font-size:clamp(3rem,8vw,4.6rem); line-height:.95;
  letter-spacing:-.045em; color:var(--lima); margin:0;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(205,242,60,.28);
}
#utm-home .gran small{display:block; font-family:var(--mono); font-size:12px; font-weight:400; color:var(--texto-2); letter-spacing:.06em; margin-top:14px; text-shadow:none}

#utm-home .barras{display:flex; flex-direction:column; gap:13px}
#utm-home .barra{display:grid; grid-template-columns:96px 1fr 62px; gap:12px; align-items:center; font-size:13px}
#utm-home .barra .q{color:var(--texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#utm-home .barra .t{height:9px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden}
#utm-home .barra .t i{
  display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg, var(--violeta-hondo), var(--violeta));
  box-shadow:0 0 16px -2px rgba(124,77,255,.8);
  transform-origin:left; animation:crece 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes crece{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
#utm-home .barra .v{font-family:var(--mono); font-size:12px; color:var(--texto); text-align:right; font-variant-numeric:tabular-nums}

/* ---- partner ---- */
#utm-home .partner{display:grid; grid-template-columns:1.6fr 1fr; gap:44px; align-items:center}
@media(max-width:800px){#utm-home .partner{grid-template-columns:1fr}}
#utm-home .logo-im{
  background:#0A0715; border:1px solid var(--borde-luz); border-radius:12px;
  padding:30px 34px; display:grid; place-items:center;
}
#utm-home .logo-im span{font-family:var(--display); font-weight:400; font-size:1.5rem; color:#fff; letter-spacing:-.02em; white-space:nowrap}
#utm-home .logo-im span b{color:var(--coral); font-weight:400; margin:0 2px}

/* ---- cierre ---- */
#utm-home .cierre{text-align:center; padding:104px 0 116px; border-top:1px solid var(--borde); position:relative; overflow:hidden}
#utm-home .cierre::before{
  content:""; position:absolute; inset:auto 0 -60% 0; height:130%;
  background:radial-gradient(48% 60% at 50% 100%, rgba(124,77,255,.3) 0%, transparent 70%);
  pointer-events:none;
}
#utm-home .cierre>*{position:relative}
#utm-home .cierre .h2{margin-left:auto; margin-right:auto; max-width:24ch}
#utm-home .cierre .dek{margin-left:auto; margin-right:auto; margin-bottom:34px}
#utm-home .cierre .acciones{justify-content:center}

#utm-home footer{border-top:1px solid var(--borde); padding:30px 0; font-family:var(--mono); font-size:11.5px; color:var(--texto-3); display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between}


@media (prefers-reduced-motion: reduce){
  #utm-home *, #utm-home *::before, #utm-home *::after{animation:none !important; transition:none !important}
  #utm-home .respuesta .w, #utm-home .enciende{opacity:1 !important}
  #utm-home .barra .t i{transform:none !important}
  #utm-home .cursor{display:none}
}

/* ============================================================
   Cabecera y pie de Kadence, tenidos SOLO en esta plantilla.
   Acotado a body.utm-home-oscura: el resto del sitio no se toca.
   ============================================================ */
body.utm-home-oscura #masthead,
body.utm-home-oscura .site-header-wrap,
body.utm-home-oscura #colophon,
body.utm-home-oscura .site-footer-wrap{
  background:var(--fondo) !important;
  border-color:var(--borde) !important;
}
body.utm-home-oscura #masthead{
  border-bottom:1px solid var(--borde) !important;
  box-shadow:none !important;
}
/* enlaces del menu */
body.utm-home-oscura #masthead a,
body.utm-home-oscura #masthead .menu-item > a,
body.utm-home-oscura #colophon,
body.utm-home-oscura #colophon a{
  color:var(--texto-2) !important;
}
body.utm-home-oscura #masthead a:hover,
body.utm-home-oscura #masthead .menu-item > a:hover,
body.utm-home-oscura #colophon a:hover{
  color:var(--texto) !important;
}
/* el logo es un SVG violeta sobre claro: sobre oscuro necesita aclararse */
body.utm-home-oscura .site-branding img,
body.utm-home-oscura .site-branding svg{
  filter:brightness(0) invert(1);
}
/* submenus desplegables */
body.utm-home-oscura #masthead .sub-menu{
  background:var(--superficie) !important;
  border:1px solid var(--borde-luz) !important;
}
body.utm-home-oscura #masthead .sub-menu a{ color:var(--texto-2) !important; }
/* iconos (flechas, hamburguesa) */
body.utm-home-oscura #masthead .kadence-svg-icon svg{ fill:currentColor; }
/* Kadence mete padding vertical al contenedor de contenido: aqui lo pone la escena */
body.utm-home-oscura .content-area,
body.utm-home-oscura .site-container,
body.utm-home-oscura .entry-content{
  padding-top:0 !important; padding-bottom:0 !important;
  max-width:none !important; margin:0 !important;
}
body.utm-home-oscura .entry-content > #utm-home{ margin:0; }

/* ============================================================
   Kadence colorea h1/h2/h3 de forma explicita, y una regla
   explicita siempre gana a la herencia. Hay que fijar el color
   de los titulares dentro de la escena o salen casi invisibles.
   ============================================================ */
#utm-home h1, #utm-home h2, #utm-home h3,
#utm-home .claim, #utm-home .h2{
  color:var(--texto);
}
#utm-home .claim em{ color:var(--violeta); }
#utm-home .gran{ color:var(--lima); }
#utm-home .rotulo{ color:var(--violeta); }
#utm-home .eyebrow{ color:var(--cian); }
#utm-home .cifra .n{ color:var(--texto); }
#utm-home .cifra .n.luz{ color:var(--violeta); }
#utm-home .btn-1{ color:var(--lima-ink); }
#utm-home .btn-2{ color:var(--texto); }
#utm-home .logo-im span{ color:#fff; }
#utm-home .logo-im span b{ color:var(--coral); }
/* Kadence tambien fija el color de los enlaces del contenido */
#utm-home a.btn, #utm-home .btn{ text-decoration:none; }

/* la marca del header va en blanco pleno, no en gris de menu */
body.utm-home-oscura #masthead .site-branding a,
body.utm-home-oscura #masthead .brand,
body.utm-home-oscura #masthead .brand a{
  color:var(--texto) !important;
}

/* ============================================================
   La marca del header es texto (<p class="site-title">), no una
   imagen. La regla generica de enlaces del menu la dejaba en gris
   apagado: aqui va en blanco pleno, con el punto en violeta como
   en el resto del sistema.
   ============================================================ */
body.utm-home-oscura #masthead .site-title,
body.utm-home-oscura #masthead .brand .site-title{
  color:var(--texto) !important;
  font-family:var(--display) !important;
  font-weight:700 !important;
  letter-spacing:-.02em;
}
body.utm-home-oscura #masthead .site-title::after{
  content:".";
  color:var(--violeta);
}
body.utm-home-oscura #masthead .brand:hover .site-title{
  color:#fff !important;
}