/* ==========================================================================
   ALTAWEB.IA · DIRECCIÓN DE ARTE — "CAMPO DE SEÑAL"
   --------------------------------------------------------------------------
   Tesis: el aurora es una FUENTE DE LUZ que aparece donde el mensaje tiene su
   pico, no un fondo decorativo repetido. Geometría dibujada en luz sobre campo
   oscuro. Todo sale del sistema de marca:
     · patrones  → brand-kit/snippets/patterns.css (04 mesh, 06 orbit)
     · motion    → brand-kit/snippets/animations.css (aw-btn-shine, pulse-glow)
     · ilustraciones → brand-kit/illustrations, recoloreadas para fondo oscuro
   Nada aquí inventa un primitivo nuevo del sistema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · LUZ AMBIENTAL
   El patrón 04 del brand-kit, bajado de intensidad: ilumina, no tapiza.
   -------------------------------------------------------------------------- */

.aw-glow { position: relative; isolation: isolate; }
.aw-glow > * { position: relative; z-index: 1; }

.aw-glow::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 55% 45% at 16% 26%, rgba(124, 58, 237, .72) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 84% 64%, rgba(217, 70, 239, .42) 0%, transparent 62%),
    radial-gradient(ellipse 60% 35% at 50% 106%, rgba(34, 211, 238, .30) 0%, transparent 66%);
  filter: blur(70px);
  animation: aw-drift 24s ease-in-out infinite alternate;
}

.aw-glow--tenue::before { opacity: .45; }

@keyframes aw-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%,  2%, 0) scale(1.07); }
}

/* --------------------------------------------------------------------------
   2 · MOTIVO DE ÓRBITA
   Patrón 06 del brand-kit como marca de agua estructural, no como textura.
   -------------------------------------------------------------------------- */

.aw-orbit { position: relative; isolation: isolate; overflow: hidden; }
.aw-orbit > * { position: relative; z-index: 1; }

.aw-orbit::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -180px;
  width: 640px;
  height: 640px;
  transform: translateY(-50%);
  opacity: .20;
  pointer-events: none;
  background-image: radial-gradient(circle at center,
    transparent 96px, rgba(167, 139, 250, .55) 97px, transparent 98px,
    transparent 152px, rgba(167, 139, 250, .40) 153px, transparent 154px,
    transparent 216px, rgba(167, 139, 250, .28) 217px, transparent 218px,
    transparent 288px, rgba(167, 139, 250, .18) 289px, transparent 290px);
}

@media (max-width: 1024px) { .aw-orbit::before { display: none; } }

/* --------------------------------------------------------------------------
   3 · BOTÓN PRIMARIO CON DEGRADADO EN MOVIMIENTO
   aw-btn-shine del brand-kit, adaptado al sistema web: radio 0, no píldora.
   -------------------------------------------------------------------------- */

@keyframes aw-btn-shine {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

.aw-cta-primary .elementor-button {
  background-image: linear-gradient(90deg, #4C1D95, #7C3AED, #D946EF, #22D3EE, #7C3AED, #4C1D95);
  background-size: 200% 100%;
  animation: aw-btn-shine 6s linear infinite;
  color: #0A0118;
  font-weight: 700;
  border: 0;
  box-shadow: var(--keyline);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.aw-cta-primary .elementor-button:hover,
.aw-cta-primary .elementor-button:focus-visible {
  color: #0A0118;
  transform: scale(1.02);
  filter: brightness(1.08);
}

/* El CTA secundario permanece deliberadamente callado: es la regla 16 del
   brief y la que más caro sale romper. */
.aw-cta-secondary .elementor-button {
  box-shadow: none;
  animation: none;
}

/* --------------------------------------------------------------------------
   4 · ILUSTRACIONES
   -------------------------------------------------------------------------- */

.aw-figura img { display: block; width: 100%; height: auto; }

.aw-figura--hero img {
  filter: drop-shadow(0 24px 60px rgba(124, 58, 237, .45));
}

/* --------------------------------------------------------------------------
   5 · PROFUNDIDAD
   Sombras con desplazamiento y desenfoque. Un halo sin offset es decoración.
   -------------------------------------------------------------------------- */

.e-con.aw-card {
  border: 1px solid var(--line);
  background-color: var(--card);
  transition: transform 220ms var(--ease),
              border-color 220ms var(--ease),
              box-shadow 220ms var(--ease),
              background-color 220ms var(--ease);
}

.e-con.aw-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-active);
  background-color: var(--elevated);
}

/* --------------------------------------------------------------------------
   6 · LISTA DE SERVICIOS
   Sustituye la rejilla de 7 tarjetas idénticas. Filas con línea de corte:
   la tarjeta era el contenedor perezoso.
   -------------------------------------------------------------------------- */

.aw-lista-servicios .elementor-widget-heading { margin: 0; }

.e-con.aw-fila-servicio, .aw-fila-servicio {
  border-bottom: 1px solid var(--line);
  /* transform, no padding-left: animar propiedades de layout provoca reflow. */
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}

.aw-fila-servicio:hover {
  background-color: var(--elevated);
  transform: translateX(10px);
}

.aw-fila-servicio:hover .aw-servicio-titulo .elementor-heading-title { color: var(--cyan); }

.aw-servicio-titulo .elementor-heading-title { transition: color 200ms var(--ease); }

/* --------------------------------------------------------------------------
   7 · MEDIDA DE LECTURA
   El cuerpo nunca pasa de ~70 caracteres, se ponga el ancho que se ponga.
   -------------------------------------------------------------------------- */

.elementor-widget-text-editor p { max-width: 68ch; }

/* --------------------------------------------------------------------------
   8 · MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aw-glow::before { animation: none; }
  .aw-cta-primary .elementor-button { animation: none; background-position: 30% 50%; }
}

/* La ilustracion del hero es un ancla visual, no un icono decorativo. */
.aw-figura--hero img { max-width: 380px; margin-inline: auto; }
@media (max-width: 1024px) { .aw-figura--hero img { max-width: 260px; } }

/* El SVG trae width=200 intrinseco; hay que forzarlo a llenar su columna. */
#aw-hero-figura { width: 34%; }
#aw-hero-figura img, .aw-figura--hero img {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  #aw-hero-figura { width: 62%; }
  #aw-hero-figura img, .aw-figura--hero img { max-width: 280px; }
}

/* --------------------------------------------------------------------------
   9 · EL CONSTRUCTOR DEL HERO
   Una página que se ensambla sola. No decora: argumenta la promesa de venta.
   -------------------------------------------------------------------------- */

.aw-constructor { width: 100%; max-width: 620px; margin-inline: auto; }

.aw-constructor__svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(124, 58, 237, .38));
}

.aw-constructor__pasos {
  display: flex;
  gap: 22px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.aw-constructor__pasos .c-paso { transition: opacity 200ms var(--ease); }

@media (max-width: 767px) {
  .aw-constructor__pasos { gap: 14px; font-size: 10px; }
}

/* El widget HTML no debe heredar la caja de contenido de Elementor. */
.aw-constructor-wrap .elementor-widget-container { width: 100%; }

/* --------------------------------------------------------------------------
   10 · "EL PROBLEMA" — el buscador donde tu negocio no aparece
   Los radios de este bloque son deliberados: se representa la interfaz de otro
   producto. La UI propia de Altaweb sigue a radio 0 en todo el sitio.
   -------------------------------------------------------------------------- */

.aw-serp {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 22px;
  align-items: start;
  width: 100%;
}

@media (max-width: 900px) { .aw-serp { grid-template-columns: 1fr; } }

/* --- Panel del buscador --- */
.aw-serp__panel {
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(24, 12, 46, .96), rgba(12, 6, 26, .96));
  padding: 16px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9),
              0 0 0 1px rgba(124, 58, 237, .10);
}

.aw-serp__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  padding: 11px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--white);
}

.aw-serp__lupa { color: var(--muted); display: inline-flex; }
.aw-serp__query { letter-spacing: .01em; }

.aw-serp__caret {
  width: 2px;
  height: 16px;
  background: var(--cyan);
  animation: aw-caret 1s step-end infinite;
}

@keyframes aw-caret { 50% { opacity: 0; } }

/* --- Resultados --- */
.aw-serp__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.aw-serp__item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
  padding: 11px 12px;
}

.aw-serp__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aw-serp__avatar--1 { background: linear-gradient(135deg, #7C3AED, #A855F7); }
.aw-serp__avatar--2 { background: linear-gradient(135deg, #22D3EE, #7C3AED); }
.aw-serp__avatar--3 { background: linear-gradient(135deg, #D946EF, #7C3AED); }

.aw-serp__avatar--vacio {
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .22);
  color: var(--muted);
}

.aw-serp__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.aw-serp__nombre { color: var(--white); font-size: 14px; font-weight: 500; }
.aw-serp__meta { color: var(--muted); font-size: 11.5px; }
.aw-serp__meta b { color: var(--white); font-weight: 700; }

.aw-serp__accion {
  flex: 0 0 auto;
  border-radius: 0;
  background: linear-gradient(135deg, #7C3AED, #22D3EE);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 15px;
}

/* La fila que duele */
.aw-serp__item--tu {
  border-style: dashed;
  border-color: rgba(255, 120, 120, .38);
  background: rgba(255, 90, 90, .05);
}

.aw-serp__meta--fallo {
  color: #FF8A8A;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- Recorrido del cliente --- */
.aw-ruta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

@media (max-width: 900px) {
  .aw-ruta { border-left: 0; padding-left: 0; grid-template-columns: repeat(2, 1fr); }
}

.aw-ruta__paso { display: flex; align-items: center; gap: 10px; }

.aw-ruta__icono {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}

.aw-ruta__texto { display: flex; flex-direction: column; line-height: 1.25; }
.aw-ruta__texto b { color: var(--white); font-size: 13.5px; font-weight: 600; }
.aw-ruta__texto i { color: var(--muted); font-size: 11.5px; font-style: normal; }

.aw-ruta__paso--final .aw-ruta__icono { border-color: rgba(255, 120, 120, .45); color: #FF8A8A; }
.aw-ruta__paso.esta-activo .aw-ruta__icono { color: var(--cyan); border-color: rgba(34, 211, 238, .55); }
.aw-ruta__paso--final.esta-activo .aw-ruta__icono { color: #FF8A8A; border-color: rgba(255, 120, 120, .8); }

/* --- Palabra acentuada del titular. Un solo acento, no una costumbre. --- */
.aw-acento-gradiente {
  background: linear-gradient(100deg, #A855F7 0%, #7C3AED 45%, #22D3EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Kicker numerado. Es una secuencia narrativa, no un eyebrow suelto. --- */
.aw-kicker .elementor-heading-title { color: var(--muted); }
.aw-kicker .elementor-heading-title::first-letter { color: var(--violet); }

/* --------------------------------------------------------------------------
   11 · EL MÓVIL — la llamada se la lleva otro
   -------------------------------------------------------------------------- */

.aw-serp { grid-template-columns: minmax(0, 1.15fr) minmax(0, .48fr) minmax(0, .42fr); }

@media (max-width: 1100px) { .aw-serp { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
@media (max-width: 900px)  { .aw-serp { grid-template-columns: 1fr; } }

.aw-movil { display: flex; justify-content: center; }
@media (max-width: 1100px) { .aw-movil { display: none; } }

.aw-movil__cuerpo {
  position: relative;
  width: 168px;
  padding: 22px 16px 18px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, #150528, #08030f);
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .95);
  text-align: center;
}

.aw-movil__notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
}

.aw-movil__estado { margin: 6px 0 2px; font-size: 10.5px; color: var(--muted); }
.aw-movil__destino { margin: 0 0 14px; font-size: 12.5px; color: var(--white); font-weight: 600; }

.aw-movil__disco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 0;
  background: linear-gradient(135deg, #7C3AED, #22D3EE);
  color: #FFFFFF;
  margin-bottom: 14px;
}

.aw-movil__controles { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }

.aw-movil__boton {
  width: 26px; height: 26px;
  border-radius: 0;
  background: rgba(255, 255, 255, .07);
}

.aw-movil__colgar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 0;
  background: #E5484D;
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   12 · CLIENTES PERDIDOS
   -------------------------------------------------------------------------- */

.aw-perdidos__intro { margin: 0 0 18px; color: var(--white); font-size: 17px; font-weight: 500; }

.aw-perdidos__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.aw-perdidos__item { display: flex; align-items: center; gap: 10px; }

.aw-perdidos__avatar {
  width: 40px; height: 40px;
  border-radius: 0;
  border: 1px dashed rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}

.aw-perdidos__txt { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.aw-perdidos__txt b { color: var(--white); font-weight: 700; }
.aw-perdidos__flecha { color: rgba(255, 255, 255, .28); font-size: 17px; }
.aw-perdidos__flecha--fin { letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   13 · HUB DE LA SOLUCIÓN
   -------------------------------------------------------------------------- */

.aw-hub { width: 100%; }

.aw-hub__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 20px 26px;
  align-items: center;
}

@media (max-width: 900px) {
  .aw-hub__grid { grid-template-columns: 1fr 1fr; }
  .aw-hub__centro { grid-column: 1 / -1; order: -1; }
  .aw-hub__hilos { display: none; }
}

.aw-hub__nodo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 16px 18px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), background-color 220ms var(--ease);
}

.aw-hub__nodo:hover {
  transform: translateY(-3px);
  border-color: var(--line-active);
  background: var(--elevated);
}

.aw-hub__nodo--tl { grid-column: 1; grid-row: 1; }
.aw-hub__nodo--tr { grid-column: 3; grid-row: 1; }
.aw-hub__nodo--bl { grid-column: 1; grid-row: 2; }
.aw-hub__nodo--br { grid-column: 3; grid-row: 2; }

.aw-hub__icono {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, .9), rgba(34, 211, 238, .55));
  color: #FFFFFF;
}

.aw-hub__txt { display: flex; flex-direction: column; gap: 2px; }
.aw-hub__txt b { color: var(--white); font-size: 12px; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.aw-hub__txt i { color: var(--cyan); font-size: 13px; font-style: normal; }
.aw-hub__txt em { color: var(--muted); font-size: 12.5px; font-style: normal; }

.aw-hub__centro {
  grid-column: 2; grid-row: 1 / span 2;
  position: relative; z-index: 2;
  width: 150px; height: 150px;
  border-radius: 0;
  border: 1px solid rgba(124, 58, 237, .45);
  background: radial-gradient(circle at 50% 40%, rgba(124, 58, 237, .28), rgba(10, 1, 24, .95));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 0 60px -12px rgba(124, 58, 237, .7);
}

.aw-hub__centro-txt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  line-height: 1.4;
}

.aw-hub__flecha { color: var(--cyan); }

.aw-hub__hilos {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14 · BANDA CTA CON DEGRADADO
   -------------------------------------------------------------------------- */

.aw-banda-cta .elementor-button {
  background-image: linear-gradient(100deg, #7C3AED, #A855F7, #22D3EE);
  background-size: 160% 100%;
  color: #FFFFFF;
  border: 0;
  padding: 22px 40px;
  box-shadow: 0 24px 60px -22px rgba(124, 58, 237, .9);
  transition: background-position 400ms var(--ease), transform 200ms var(--ease);
}

.aw-banda-cta .elementor-button:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   15 · RADIO CERO, SIN EXCEPCIONES
   DESIGN.md §3 es literal: botones, tarjetas, inputs, badges, imagenes y
   contenedores a cero. Se retiran las excepciones que yo habia hecho para las
   maquetas embebidas: el documento no las contempla y manda el documento.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   16 · SERVICIOS — BENTO ACTIVO
   El bento es el patrón dominante de 2026 y por tanto está saturado: lo usa el
   67% del top 100 de ProductHunt. Lo que lo diferencia hoy es que el mosaico
   REVELE algo al pasar el ratón, y que cada mini-maqueta muestre lo que ese
   servicio produce de verdad — no un icono genérico.
   Sistema de DESIGN.md: superficie --card, hover a --elevated, radio 0, sin
   sombras. La profundidad la da el valor, no el desenfoque.
   ========================================================================== */

.aw-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) { .aw-bento { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 640px)  { .aw-bento { grid-template-columns: 1fr; gap: 12px; } }

/* Reparto asimétrico: el servicio ancla manda. */
.aw-bento > .aw-tile--web   { grid-column: span 6; }
.aw-bento > .aw-tile--seo   { grid-column: span 3; }
.aw-bento > .aw-tile--marca { grid-column: span 3; }
.aw-bento > .aw-tile--ia    { grid-column: span 4; }
.aw-bento > .aw-tile--chat  { grid-column: span 4; }
.aw-bento > .aw-tile--redes { grid-column: span 4; }
.aw-bento > .aw-tile--mant  { grid-column: span 12; }

@media (max-width: 1024px) {
  .aw-bento > .aw-tile--web   { grid-column: span 6; }
  .aw-bento > .aw-tile--seo   { grid-column: span 3; }
  .aw-bento > .aw-tile--marca { grid-column: span 3; }
  .aw-bento > .aw-tile--ia    { grid-column: span 2; }
  .aw-bento > .aw-tile--chat  { grid-column: span 2; }
  .aw-bento > .aw-tile--redes { grid-column: span 2; }
  .aw-bento > .aw-tile--mant  { grid-column: span 6; }
}

@media (max-width: 640px) {
  .aw-bento > .aw-tile--web,
  .aw-bento > .aw-tile--seo,
  .aw-bento > .aw-tile--marca,
  .aw-bento > .aw-tile--ia,
  .aw-bento > .aw-tile--chat,
  .aw-bento > .aw-tile--redes,
  .aw-bento > .aw-tile--mant { grid-column: 1 / -1; }
}

/* --- El mosaico --- */
.e-con.aw-tile {
  position: relative;
  overflow: hidden;
  background-color: var(--card);
  border: 1px solid var(--line);
  transition: border-color 200ms ease-out, background-color 200ms ease-out, transform 200ms ease-out;
}

.e-con.aw-tile:hover {
  transform: translateY(-4px);
  border-color: var(--line-active);
  background-color: var(--elevated);
}

/* La capa que se revela. Es lo que separa un bento de 2026 de uno de 2023. */
.aw-tile .aw-tile__ir .elementor-button {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}

.aw-tile:hover .aw-tile__ir .elementor-button,
.aw-tile:focus-within .aw-tile__ir .elementor-button {
  opacity: 1;
  transform: none;
}

/* En táctil no hay hover: el enlace se ve siempre. */
@media (hover: none) {
  .aw-tile .aw-tile__ir .elementor-button { opacity: 1; transform: none; }
}

/* ==========================================================================
   17 · MINI-MAQUETAS DE CADA MOSAICO
   Cada una muestra lo que ese servicio produce. Sin iconos genéricos.
   ========================================================================== */

.sv {
  position: relative;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  min-height: 128px;
  transition: border-color 200ms ease-out;
}

.aw-tile:hover .sv { border-color: rgba(124, 58, 237, .35); }

.sv-l { display: block; height: 8px; background: rgba(255, 255, 255, .16); }
.sv-l--xl { width: 76%; height: 12px; margin-bottom: 8px; }
.sv-l--m  { width: 52%; margin-bottom: 12px; }
.sv-l--s  { width: 64%; }

/* --- Diseño web: un navegador que se arma --- */
.sv--web .sv-nav { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.sv--web .sv-nav i { width: 7px; height: 7px; background: rgba(255, 255, 255, .22); }
.sv--web .sv-url { flex: 1; height: 9px; margin-left: 8px; background: rgba(255, 255, 255, .08); }
.sv--web .sv-hero { padding: 14px; background: linear-gradient(135deg, #7C3AED, #22D3EE); margin-bottom: 10px; }
.sv--web .sv-hero .sv-l { background: rgba(10, 1, 24, .45); }
.sv--web .sv-btn { display: block; width: 74px; height: 20px; background: rgba(10, 1, 24, .8); }
.sv--web .sv-row { display: flex; gap: 10px; }
.sv--web .sv-tile { flex: 1; height: 34px; background: rgba(255, 255, 255, .06); }

/* --- SEO: el remate narrativo. Ahora tu negocio SÍ aparece, y el primero. --- */
.sv--seo .sv-buscador { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); margin-bottom: 12px; }
.sv--seo .sv-lupa { width: 10px; height: 10px; border: 1.5px solid var(--muted); }
.sv--seo .sv-q { flex: 1; height: 8px; background: rgba(255, 255, 255, .12); }
.sv--seo .sv-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sv--seo .sv-rank__item { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10px; color: var(--ash); }
.sv--seo .sv-rank__barra { flex: 1; height: 9px; background: rgba(255, 255, 255, .09); }
.sv--seo .sv-rank__item--tu { color: var(--white); }
.sv--seo .sv-rank__item--tu b { color: var(--cyan); }
.sv--seo .sv-rank__item--tu .sv-rank__barra { background: linear-gradient(135deg, #7C3AED, #22D3EE); }
.sv--seo .sv-rank__item em { font-style: normal; font-size: 9.5px; color: var(--cyan); }

/* --- Branding: cartas de marca apiladas --- */
.sv--marca { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sv--marca .sv-carta { width: 54px; height: 68px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); transition: transform 260ms ease-out; }
.sv--marca .sv-carta--a { color: var(--white); transform: rotate(-7deg); }
.sv--marca .sv-carta--b { color: var(--white); background: linear-gradient(135deg, #7C3AED, #22D3EE); border-color: transparent; }
.sv--marca .sv-carta--c { transform: rotate(7deg); background: rgba(255, 255, 255, .05); }
.aw-tile:hover .sv--marca .sv-carta--a { transform: rotate(-12deg) translateX(-4px); }
.aw-tile:hover .sv--marca .sv-carta--c { transform: rotate(12deg) translateX(4px); }

/* --- IA: tareas que confluyen en un nodo --- */
.sv--flujo { display: flex; align-items: center; justify-content: space-between; color: rgba(167, 139, 250, .55); }
.sv--flujo .sv-hilos { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.sv--flujo .sv-nodo { position: relative; z-index: 1; width: 26px; height: 26px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.sv--flujo .sv-nodo--2 { align-self: flex-end; }
.sv--flujo .sv-nodo--3 { width: 34px; height: 34px; background: rgba(124, 58, 237, .22); border-color: rgba(124, 58, 237, .5); }
.sv--flujo .sv-nodo--fin { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7C3AED, #22D3EE); color: #0A0118; border: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }

/* --- Chatbots: una conversación que se responde sola --- */
.sv--chat { display: flex; flex-direction: column; gap: 9px; }
.sv--chat .sv-burbuja { display: block; height: 26px; }
.sv--chat .sv-burbuja--ellos { width: 62%; background: rgba(255, 255, 255, .07); }
.sv--chat .sv-burbuja--tu { width: 52%; align-self: flex-end; background: linear-gradient(135deg, #7C3AED, #22D3EE); }
.sv--chat .sv-escribiendo { display: inline-flex; gap: 5px; padding: 8px 10px; background: rgba(255, 255, 255, .05); width: fit-content; }
.sv--chat .sv-escribiendo i { width: 6px; height: 6px; background: var(--cyan); opacity: .35; }
.aw-tile:hover .sv--chat .sv-escribiendo i { animation: sv-pensando 1.3s ease-in-out infinite; }
.aw-tile:hover .sv--chat .sv-escribiendo i:nth-child(2) { animation-delay: .16s; }
.aw-tile:hover .sv--chat .sv-escribiendo i:nth-child(3) { animation-delay: .32s; }

@keyframes sv-pensando {
  0%, 80%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

/* --- Redes: publicación y crecimiento --- */
.sv--redes { display: flex; align-items: flex-end; gap: 14px; }
.sv--redes .sv-post { flex: 1; display: block; }
.sv--redes .sv-post__img { display: block; height: 66px; margin-bottom: 8px; background: linear-gradient(135deg, rgba(124, 58, 237, .5), rgba(34, 211, 238, .3)); }
.sv--redes .sv-metrica { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); }
.sv--redes .sv-metrica b { color: var(--white); font-size: 15px; font-weight: 700; }
.sv--redes .sv-metrica em { font-style: normal; font-size: 10px; color: var(--ash); font-family: var(--font-mono); }

/* --- Mantenimiento: el panel de estado --- */
.sv--estado { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; min-height: 0; }
.sv--estado .sv-estado__fila { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bone); }
.sv--estado .sv-punto { width: 7px; height: 7px; background: #3DDC97; }
.sv--estado .sv-uptime { margin-left: auto; display: flex; align-items: baseline; gap: 6px; }
.sv--estado .sv-uptime b { color: var(--white); font-size: 17px; font-weight: 700; }
.sv--estado .sv-uptime em { font-style: normal; font-size: 10px; color: var(--ash); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }

/* La rejilla estira las filas a la altura del mosaico mas alto. Si la
   mini-maqueta no crece con ellas, queda hueco muerto abajo.
   La maqueta CRECE para ocupar lo que sobre. */
.e-con.aw-tile > .elementor-widget-html { flex: 1 1 auto; display: flex; }
.e-con.aw-tile > .elementor-widget-html > .elementor-widget-container { flex: 1; display: flex; }
.e-con.aw-tile .sv { flex: 1 1 auto; }

/* El mosaico ancho de mantenimiento no necesita crecer: su contenido es una
   sola linea de estado. */
.aw-tile--mant .sv { flex: 0 0 auto; min-height: 0; }

/* El enlace revelado se ancla abajo del mosaico; asi la mini-maqueta ocupa
   todo el espacio sobrante en vez de dejar un hueco muerto en reposo. */
.e-con.aw-tile > .aw-tile__ir { margin-top: auto; padding-top: 14px; }
.e-con.aw-tile { justify-content: flex-start; }

/* ==========================================================================
   18 · FORMULARIOS — DESIGN.md §4.9
   Fondo --panel, borde 1px --line, radio 0, texto --bone, 16px (por debajo
   iOS hace zoom al enfocar), y el foco en cian como única señal cromática.
   ========================================================================== */

.aw-form .elementor-field-group > label,
.aw-form .elementor-field-subgroup label {
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: -0.005em;
}

.aw-form .elementor-field-group > label {
  margin-bottom: 8px;
  font-weight: 500;
}

.aw-form .elementor-field-textual {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.aw-form .elementor-field-textual::placeholder { color: var(--ash); }

.aw-form .elementor-field-textual:focus {
  border-color: var(--cyan);
  outline: 2px solid rgba(34, 211, 238, .25);
  outline-offset: 0;
  box-shadow: none;
}

/* --- Radios y casillas: la marca es cian, el resto se calla --- */
.aw-form .elementor-field-subgroup {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.aw-form .elementor-field-subgroup .elementor-field-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.aw-form input[type="radio"],
.aw-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.aw-form input[type="radio"]:hover,
.aw-form input[type="checkbox"]:hover { border-color: var(--line-active); }

.aw-form input[type="radio"]:checked,
.aw-form input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #7C3AED, #22D3EE);
  border-color: transparent;
}

.aw-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #0A0118;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.aw-form input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #0A0118;
}

.aw-form input[type="radio"]:focus-visible,
.aw-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Consentimiento RGPD: sin premarcar y con el enlace a privacidad al lado */
.aw-form .elementor-field-type-acceptance .elementor-field-option { align-items: flex-start; }
.aw-form .elementor-field-type-acceptance label { font-size: 13px; color: var(--muted); line-height: 1.45; }
.aw-form .elementor-field-type-acceptance a { color: var(--cyan); text-underline-offset: .2em; }

/* --- Indicadores de paso --- */
.aw-form .e-form__indicators { margin-bottom: 26px; gap: 10px; }

.aw-form .e-form__indicators__indicator {
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  padding: 8px 14px;
}

.aw-form .e-form__indicators__indicator--state-active {
  border-color: var(--cyan);
  color: var(--white);
}

.aw-form .e-form__indicators__indicator--state-completed {
  border-color: var(--line-active);
  color: var(--muted);
}

.aw-form .e-form__indicators__indicator__progress { border-radius: 0; }

/* --- Botones del formulario --- */
.aw-form .elementor-button[type="submit"],
.aw-form .e-form__buttons__wrapper__button-next {
  background-image: linear-gradient(135deg, #7C3AED, #22D3EE);
  background-color: transparent;
  color: #0A0118;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  padding: 16px 32px;
  box-shadow: var(--keyline);
  transition: transform 180ms ease-out, filter 180ms ease-out;
}

.aw-form .elementor-button[type="submit"]:hover,
.aw-form .e-form__buttons__wrapper__button-next:hover {
  transform: scale(1.02);
  filter: brightness(1.08);
  color: #0A0118;
}

.aw-form .e-form__buttons__wrapper__button-previous {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 15px 26px;
}

.aw-form .e-form__buttons__wrapper__button-previous:hover {
  border-color: var(--line-active);
  color: var(--white);
}

.aw-form .e-form__buttons { gap: 12px; margin-top: 8px; }

/* --- Mensajes --- */
.aw-form .elementor-message { font-size: 15px; border-radius: 0; }
.aw-form .elementor-message.elementor-message-success { color: var(--cyan); }
.aw-form .elementor-message.elementor-message-danger { color: #FF8A8A; }

/* Los enlaces en línea del cuerpo van en cian: el violeta no llega a AA. */
#aw-contacto a:not(.elementor-button) { color: var(--cyan); text-underline-offset: .2em; }