/* Landing Trydan.
   Todo bajo .trydan-lp: no afecta a ninguna otra pagina.
   Vale para los 24 idiomas porque ninguna clase depende del texto.
   Reversible: desactivar el snippet.

   CLAVE ESTRUCTURAL: cada bloque wp:group renderiza un hijo
   .wp-block-group__inner-container y los hijos reales viven DENTRO de el.
   Por eso toda la maquetacion (grid/flex) va en ese hijo, no en el div externo.

   Medidas tomadas de la captura del diseno en proporciones de viewport (vw),
   que son invariantes a la escala de la captura. */

/* ═══ MONTSERRAT DESDE EL PROPIO DOMINIO ════════════════════════════════
   Es la fuente VARIABLE: un solo fichero de 37 KB cubre los pesos 100 a 900,
   asi que no hace falta uno por peso. Antes se descargaban 251 KB en 6
   ficheros —redonda y cursiva, latin y latin-ext, mas Open Sans— y ni las
   cursivas ni Open Sans las usa ningun CSS de la pagina.

   Solo el subconjunto latin. Comprobado caracter a caracter: de todo el texto
   de la pagina el unico que se sale es "✦", y tampoco entra en el latin de
   Google, asi que ya venia cayendo en la fuente del sistema.

   La ruta es absoluta desde la raiz a proposito: este CSS va incrustado en el
   HTML, asi que una ruta relativa se resolveria contra la url de la pagina.

   Montserrat es SIL Open Font License: autoalojarla esta permitido. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/wp-content/uploads/v2c-fonts/montserrat-latin-var.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Los tokens los comparten la landing y las dos barras fijas.
   IMPORTANTE: las barras NO estan dentro de .trydan-lp —son hermanas suyas en
   el contenido—, asi que mientras los tokens vivieron solo ahi, var(--t-accent)
   no resolvia a nada en el dock y el naranja del estado activo no se aplicaba.
   Ni ese ni el resto de colores. Por eso van los tres selectores juntos. */
.trydan-lp,
.trydan-topbar,
.trydan-dock{
  --t-bg:#F5F4F2;
  --t-ink:#2E2E2A;
  --t-body:#63615C;
  --t-quote:#3A3A37;
  --t-accent:#EE7F1B;            /* CONFIRMAR con el naranja de marca */
  --t-accent-dark:#D46C0E;       /* hover del boton primario */
  --t-r-media:24px;
  --t-r-btn:6px;
  --t-r-pill:999px;
  --t-gutter:clamp(1.25rem,4vw,3rem);
  --t-ease:cubic-bezier(.22,1,.36,1);
  --t-linea:#E9E7E2;             /* la raya fina de toda la pagina */
}
/* el fondo y la calle son solo de las secciones, no de las barras */
.trydan-lp{
  background:var(--t-bg);
  padding-inline:var(--t-gutter);
}

/* el tema no debe estrechar nada dentro de estas secciones */
/* GeneratePress mete .site-main .wp-block-group__inner-container{padding:40px}
   a TODOS los contenedores internos, asi que hay que resetearlo.
   VA AQUI ARRIBA A PROPOSITO: tiene la misma especificidad que las reglas de
   cada seccion, asi que si va despues se come sin avisar la calle de todas las
   que la declaren en su inner-container. Estando primero, la seccion gana. */
.trydan-lp .wp-block-group__inner-container{padding:0;max-width:none;width:100%}

/* La calle de las secciones "texto | foto a sangre" (control de potencia,
   EcoCharging y configurador). Una sola, arriba, porque tres numeros casi
   iguales repartidos por el archivo acaban separandose. */
.trydan-lp{--t-gutter-sec:clamp(1.25rem,6.8vw,8.5rem)}

/* padding superior amplio: el menu es sticky y con menos aire el H1 se le metia debajo */
.trydan-hero{padding-block:clamp(5.5rem,11vw,12rem) clamp(4rem,7vw,8.5rem);text-align:center}

/* accesible pero invisible */
.trydan-lp .trydan-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── hero ───────────────────────────────────────────────────────── */
.trydan-lp .trydan-eyebrow{
  margin:0 0 clamp(1rem,2vw,1.75rem);
  font-size:clamp(.8125rem,.95vw,1rem);
  font-weight:500;
  letter-spacing:.3em;text-indent:.15em;   /* compensa el tracking al centrar */
  text-transform:uppercase;color:var(--t-accent);
}
.trydan-lp .trydan-h1{
  max-width:70ch;margin:0 auto;
  font-size:clamp(2rem,3.6vw,4rem);
  font-weight:300;line-height:1.18;letter-spacing:-.02em;
  color:var(--t-ink);text-wrap:balance;
}
.trydan-lp .trydan-sub{
  max-width:56ch;margin:clamp(1.25rem,2.4vw,2.25rem) auto 0;
  /* la entradilla de la hero tiene que ir POR ENCIMA del parrafo de seccion:
     es la promesa de apertura de la pagina, y estaba por debajo. */
  font-size:clamp(1.125rem,.8125rem + .625vw,1.625rem);
  line-height:1.65;color:var(--t-body);text-wrap:pretty;
}
/* separacion entre los dos CTA: antes iban demasiado pegados */
/* CUIDADO: en este sitio wp-block-library NO esta encolada. No existe ni una
   regla .is-layout-flex, asi que el contenedor de botones lleva la clase pero
   NO es flex, y por tanto `gap` no hacia nada: los botones quedaban pegados
   como simples inline-block. Hay que declarar el flex a mano.
   Misma precaucion para cualquier bloque cuyo layout dependa del CSS de core. */
.trydan-lp .wp-block-buttons.trydan-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin-top:clamp(1.75rem,3vw,2.75rem);
  gap:1rem max(2em,3.2vw);   /* minimo 2em, como se pidio */
}
.trydan-lp .trydan-cta .wp-block-button{margin:0}

/* Boton primario. NUNCA subrayado, en ningun estado.
   Sin desplazamiento en hover: lo que crece es el halo de color, que es el
   efecto que si gustaba. Se ilumina en el sitio en vez de moverse. */
.trydan-lp .trydan-btn>.wp-block-button__link{
  background:var(--t-accent);color:#fff;border:0;
  border-radius:var(--t-r-btn);
  padding:.85rem 1.85rem;
  font-size:clamp(.875rem,.95vw,1rem);font-weight:600;letter-spacing:.01em;
  text-decoration:none;
  /* halo suave saliendo por DEBAJO del boton, del mismo naranja y poco opaco */
  box-shadow:0 9px 20px -12px rgba(238,127,27,.30);
  transition:background-color .3s var(--t-ease),box-shadow .35s var(--t-ease);
}
.trydan-lp .trydan-btn>.wp-block-button__link:hover,
.trydan-lp .trydan-btn>.wp-block-button__link:focus,
.trydan-lp .trydan-btn>.wp-block-button__link:focus-visible,
.trydan-lp .trydan-btn>.wp-block-button__link:active{
  background:var(--t-accent-dark);color:#fff;
  text-decoration:none;
  /* dos capas: un halo cercano mas denso y otro amplio y difuso */
  /* al hacer hover el halo baja y se ensancha, sin subir de opacidad */
  box-shadow:0 17px 32px -12px rgba(238,127,27,.42);
}

/* Enlace secundario. Subrayado SIEMPRE, es el diseno.
   Antes iba en --t-ink y se veia demasiado oscuro: pasa a --t-body. */
.trydan-lp .trydan-btn--link>.wp-block-button__link{
  background:transparent;color:var(--t-body);border:0;border-radius:0;
  padding:.85rem .25rem;
  font-size:clamp(.875rem,.95vw,1rem);font-weight:600;
  text-decoration:underline;
  text-underline-offset:.28em;text-decoration-thickness:1px;
  text-decoration-color:var(--t-linea);
  transition:color .25s var(--t-ease),text-decoration-color .25s var(--t-ease);
}
.trydan-lp .trydan-btn--link>.wp-block-button__link:hover,
.trydan-lp .trydan-btn--link>.wp-block-button__link:focus,
.trydan-lp .trydan-btn--link>.wp-block-button__link:focus-visible,
.trydan-lp .trydan-btn--link>.wp-block-button__link:active{
  background:transparent;color:var(--t-accent);
  text-decoration:underline;text-decoration-color:var(--t-accent);
}

/* ── la imagen del hero se abre a todo el ancho al bajar ──────────────
   --abre va de 0 a 1 con el scroll. A 0 la imagen ocupa el ancho de la
   seccion menos el gutter; a 1 los margenes negativos cancelan ese gutter y
   llega justo a los bordes de la pantalla, y el radio se va a cero.

   Se anima el ancho real con margenes, no con scale(): escalar una imagen
   de 2428px la volveria blanda y arrastraria el texto del pie si lo hubiera. */
.trydan-lp .trydan-hero__media{
  --abre:0;
  /* Cuanto se mete por cada lado en reposo. El recorrido va de "un poco mas
     estrecha" a "el ancho de la seccion", NO a sangre completa: el margen es
     positivo y se cierra al bajar, en vez de negativo y abrirse. */
  --entra:clamp(1rem,4vw,5rem);
  width:auto;max-width:none;
  margin:clamp(2rem,4.5vw,4.5rem) calc((1 - var(--abre)) * var(--entra)) 0;
}
.trydan-lp .trydan-hero__media img{
  display:block;width:100%;height:auto;
  /* El radio ya no se pierde: la foto nunca llega a tocar el borde de la
     pantalla, y ahi unas esquinas rectas no tendrian sentido. */
  border-radius:var(--t-r-media);
}

/* ── aparicion suave del hero al cargar ───────────────────────────────
   CSS puro, sin JS ni observadores: arranca con la pagina.

   OJO: la IMAGEN queda fuera a proposito. Es el candidato a LCP —2428px de
   ancho, el elemento mas grande— y animarle la opacidad retrasaria la
   metrica tanto como dure la animacion. El texto si puede entrar. */
@media (prefers-reduced-motion:no-preference){
  .trydan-hero .trydan-eyebrow,
  .trydan-hero .trydan-h1,
  .trydan-hero .trydan-sub,
  .trydan-hero .trydan-cta{
    animation:trydan-entra .8s var(--t-ease) both;
  }
  .trydan-hero .trydan-eyebrow{animation-delay:.04s}
  .trydan-hero .trydan-h1{animation-delay:.13s}
  .trydan-hero .trydan-sub{animation-delay:.25s}
  .trydan-hero .trydan-cta{animation-delay:.37s}

  @keyframes trydan-entra{
    from{opacity:0;transform:translateY(15px)}
    to{opacity:1;transform:none}
  }
}


@media(prefers-reduced-motion:reduce){
  .trydan-lp *,.trydan-lp *::before,.trydan-lp *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
  }
}

/* ═══ 03 · CONTROL DINAMICO DE POTENCIA ═══════════════════════════════
   Medidas de la referencia, en proporciones de viewport.
   La calle de la seccion es simetrica —la tarjeta gris tiene que quedar
   centrada en la pagina— y la foto sale a sangre por la derecha anulandola
   con un margen negativo, igual que en el configurador. */

/* Las dos secciones de "texto grande | foto" —control de potencia y
   EcoCharging— comparten calle, rejilla y aire. Se declaran juntas a proposito:
   asi no puede descuadrarse una respecto de la otra al retocar solo una. */
.trydan-potencia,
.trydan-eco{
  background:#fff;
  padding-inline:var(--t-gutter-sec);
  padding-block:clamp(3rem,7vw,8.5rem);
}
.trydan-potencia{
  --t-split:41%;                 /* OJO: la referencia no es proporcional a 1,20/4,55 */
}

/* ── bloque superior: texto | foto ─────────────────────────────── */
.trydan-potencia__top>.wp-block-group__inner-container,
.trydan-eco__top>.wp-block-group__inner-container{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,5vw,6.25rem);
  align-items:center;
}
@media(min-width:64rem){
  .trydan-potencia__top>.wp-block-group__inner-container,
  .trydan-eco__top>.wp-block-group__inner-container{grid-template-columns:1fr 1.3fr}
  /* la foto de potencia es apaisada y a 1.3fr se quedaba pequena: mas columna */
  .trydan-potencia__top>.wp-block-group__inner-container{grid-template-columns:1fr 1.9fr}

  /* La foto sale a sangre por la derecha anulando la calle con un margen
     negativo, en vez de quitarsela a la seccion. Asi el texto conserva su
     calle a la izquierda y la tarjeta gris sigue centrada en la pagina.
     Es el mismo patron que el configurador. */
  .trydan-potencia__media,
  .trydan-eco__media{margin-right:calc(var(--t-gutter-sec) * -1)}
}

.trydan-lp .trydan-h2{
  margin:clamp(.75rem,1.4vw,1.5rem) 0 0;
  /* Un solo tamano de h2 en toda la pagina. Habia tres —65, 56 y 56— y este
     era el que iba mas justo: en la columna de 680px de "Control dinamico"
     el titular partia en tres lineas. */
  font-size:clamp(1.625rem,3vw,3.5rem);
  font-weight:300;line-height:1.16;letter-spacing:-.02em;
  color:var(--t-ink);text-wrap:balance;
}
.trydan-lp .trydan-body{
  margin:clamp(1.25rem,2.2vw,2.5rem) 0 0;
  max-width:78%;
  /* rem + vw y no vw a secas: con vw puro el tope no llegaba a morder antes
     de 1920 y el mismo parrafo saltaba un 27 % entre un portatil y un
     monitor. Con base fija la pendiente es la mitad y el salto queda en 13 %. */
  font-size:clamp(1.0625rem,.625rem + .625vw,1.5rem);
  line-height:1.6;color:var(--t-body);text-wrap:pretty;
}
.trydan-lp .trydan-link{
  margin:clamp(1.25rem,2.2vw,2.5rem) 0 0;
  /* estaba en 23px, por encima del parrafo de 22 al que sigue. Un "Saber mas"
     nunca puede pesar mas que el texto que lo justifica. */
  font-size:clamp(.9375rem,1vw,1.1875rem);
}
.trydan-lp .trydan-link a{
  color:var(--t-body);text-decoration:underline;
  text-underline-offset:.24em;text-decoration-thickness:1px;
  transition:color .25s var(--t-ease);
}
.trydan-lp .trydan-link a:hover,
.trydan-lp .trydan-link a:focus-visible{color:var(--t-accent)}

/* foto: a sangre por la derecha en escritorio, radio solo a la izquierda */
.trydan-potencia__media>.wp-block-group__inner-container{position:relative}
/* la foto va dentro de un div alineado a la izquierda y NO es clicable ni arrastrable */
.trydan-lp .trydan-potencia__foto{
  display:flex;justify-content:flex-start;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.trydan-lp .trydan-potencia__foto .trydan-potencia__img{width:100%}
.trydan-lp .trydan-potencia__img img{-webkit-user-drag:none}
.trydan-lp .trydan-potencia__img{margin:0}
.trydan-lp .trydan-potencia__img img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:45% 50%;
  border-radius:var(--t-r-media);
}
/* pildora sobre la foto */
.trydan-lp .trydan-badge{
  position:absolute;left:clamp(1rem,3vw,3.75rem);bottom:clamp(1rem,3vw,3.75rem);
  margin:0;display:inline-flex;align-items:center;gap:.55em;
  background:#fff;border-radius:var(--t-r-pill);
  padding:.6em 1.35em;
  font-size:clamp(.75rem,.8vw,1rem);font-weight:600;
  color:var(--t-accent-dark);
  box-shadow:0 6px 20px -8px rgba(0,0,0,.28);
}
.trydan-lp .trydan-badge__ico{color:var(--t-accent);font-size:1.15em;line-height:1}
/* el icono late en opacidad: se lee como "esto esta activo ahora mismo" */
@keyframes trydan-activo{
  0%,100%{opacity:.38}
  50%    {opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .trydan-lp .trydan-badge__ico{animation:trydan-activo 2.4s ease-in-out infinite}
}

/* ── tarjeta del divisor ────────────────────────────────────────── */
.trydan-lp .trydan-divisor{
  /* Sin margen, sin relleno, sin fondo y sin radio: el que manda es el
     contenedor de la seccion, no el divisor. */
  margin:0;max-width:none;padding:0;
  background:transparent;border-radius:0;
}
/* El ancho lo manda la tarjeta, no el grid: una sola fuente. Antes el grid
   llevaba su propio tope de 1180px y la tarjeta ocupaba todo el ancho de la
   seccion, asi que sobraba hueco dentro y faltaba centrado fuera. */
.trydan-divisor__grid>.wp-block-group__inner-container{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.5rem,3vw,2.25rem);
}
@media(min-width:64rem){
  .trydan-divisor__grid>.wp-block-group__inner-container{
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    gap:clamp(2rem,4vw,4.5rem);
    align-items:center;
  }
}
.trydan-lp .trydan-divisor .trydan-body{
  margin-top:0;max-width:none;
  font-size:var(--t-fs-p);line-height:1.6;color:var(--t-body);
}

/* NIVEL 3 · el conjunto grafico es UN objeto: una tarjeta con fondo que agrupa
   barra, leyenda y cifras. Dentro, la cifra del coche manda; las otras dos son
   contexto. La casa va en blanco para que se distinga del fondo de la tarjeta. */
.trydan-lp .trydan-grafico{
  margin-top:clamp(1.25rem,2.2vw,1.75rem);
  padding:clamp(1.1rem,2.4vw,2rem);
  background:var(--t-sup);border-radius:var(--t-r-media);
}
.trydan-lp .trydan-grafico .trydan-bar{margin-top:0}
.trydan-lp .trydan-grafico .trydan-bar__casa{background:var(--t-panel)}
.trydan-lp .trydan-grafico .trydan-stats>.wp-block-group__inner-container{
  margin-top:3.4rem;   /* deja sitio al globo, que cuelga bajo la barra */
  padding-top:clamp(1rem,2vw,1.5rem);
  border-top:1px solid var(--t-hover);
}
@media(min-width:48rem){
  .trydan-lp .trydan-grafico .trydan-stats>.wp-block-group__inner-container{
    grid-template-columns:1fr 1fr 1.8fr;align-items:end;
  }
  .trydan-lp .trydan-grafico .trydan-stat__n{font-size:var(--t-fs-cifra);color:var(--t-body)}
  .trydan-lp .trydan-grafico .trydan-stat--on .trydan-stat__n{
    font-size:clamp(2.5rem,1.4rem + 2.6vw,4.25rem);color:var(--t-accent-dark);line-height:1;
  }
}

/* ── la barra ───────────────────────────────────────────────────── */
.trydan-lp .trydan-bar{
  position:relative;
  display:grid;grid-template-columns:var(--t-split) 1fr;
  gap:14px;
  height:clamp(3.25rem,3.8vw,4.75rem);
  margin-top:clamp(1.25rem,2vw,1.75rem);
  font-size:var(--t-fs-rot);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.trydan-lp .trydan-bar__casa,
.trydan-lp .trydan-bar__coche{
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;white-space:nowrap;
}
.trydan-lp .trydan-bar__casa{
  background:var(--t-relleno);color:var(--t-ink);
  border-radius:12px 2px 2px 12px;
}
.trydan-lp .trydan-bar__coche{
  /* Blanco sobre el naranja da 2,7:1 y no pasa la AA para un rotulo de
     13px. Con la tinta casi negra sube a 6,3:1. */
  background:var(--t-accent);color:var(--t-sobre-acc);
  border-radius:2px 12px 12px 2px;
  /* A la izquierda, no centrado: el centro cae debajo de la trama del minimo */
  justify-content:flex-start;padding-left:clamp(.9rem,1.6vw,1.4rem);
}
.trydan-lp .trydan-bar__grip{
  position:absolute;top:50%;left:var(--t-split);
  transform:translate(-50%,-50%);
  width:12px;height:34px;
  background:var(--t-ink);border:0;border-radius:999px;
  display:grid;place-items:center;
}
.trydan-lp .trydan-bar__grip::before{
  content:"";width:4px;height:4px;border-radius:999px;background:#8E8B84;
}
/* globo indicador. Va DEBAJO de la barra —arriba estan las fichas y se las
   tapaba— y en tinta, no en naranja: el naranja se reserva para la barra del
   coche, que es lo unico que tiene que llamar la atencion. */
.trydan-lp .trydan-bar__tip{
  position:absolute;left:var(--t-split);top:calc(100% + 13px);
  transform:translateX(-50%);
  background:var(--t-ink);color:var(--t-panel);
  padding:.5em 1.05em;border-radius:var(--t-r-btn);
  font-size:var(--t-fs-rot);font-weight:600;
  letter-spacing:.1em;white-space:nowrap;
}
.trydan-lp .trydan-bar__tip::after{
  content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:var(--t-ink);
}

/* ── las tres cifras ───────────────────────────────────────────── */
.trydan-stats>.wp-block-group__inner-container{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,2rem);
  margin-top:clamp(1.25rem,2.4vw,2rem);
}
.trydan-lp .trydan-stat__n{
  /* el minimo baja de 28 a 22: en movil las tres cifras comparten 103px por
     columna y a 28 no dejaban sitio a su rotulo. */
  margin:0;font-size:var(--t-fs-num);
  font-weight:400;line-height:1.1;letter-spacing:-.02em;
  color:var(--t-ink);font-variant-numeric:tabular-nums;
}
.trydan-lp .trydan-stat__k{
  margin:.5em 0 0;font-size:var(--t-fs-rot);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-tenue);
}
/* El rotulo en naranja daba 2,53:1 sobre la tarjeta gris: falla la AA de
   accesibilidad por mucho. El realce se queda solo en la cifra, con el naranja
   oscuro, y el rotulo pasa al gris de los otros dos, que da 5,73:1. */
.trydan-lp .trydan-stat--on .trydan-stat__n{color:var(--t-accent-dark)}
.trydan-lp .trydan-stat--on .trydan-stat__k{color:var(--t-tenue)}

/* ── el divisor, interactivo ────────────────────────────────────────
   El globo dice "mueve el consumo de tu casa", asi que se mueve de verdad.
   El input range va invisible SOBRE la barra: arrastre con raton, con dedo y
   con teclado. El tirador es decorativo, y el foco se ve gracias a :has().

   Split por defecto proporcional: 1,20 de 5,75 = 20,87 %. Con una barra que
   se arrastra, la proporcion deja de ser opcional. */
.trydan-lp .trydan-bar{--t-split:26.09%;--t-min:30.43%}

.trydan-lp .trydan-bar__range{
  position:absolute;inset:0;
  width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
  z-index:3;
}
.trydan-lp .trydan-bar__range::-webkit-slider-thumb{
  -webkit-appearance:none;width:44px;height:44px;   /* area de toque comoda */
}
.trydan-lp .trydan-bar__range::-moz-range-thumb{
  width:44px;height:44px;border:0;background:transparent;
}
/* el tirador y el globo no deben robar el arrastre */
.trydan-lp .trydan-bar__grip,
.trydan-lp .trydan-bar__tip{pointer-events:none;z-index:2}

/* foco de teclado visible sobre el tirador */
.trydan-lp .trydan-bar:has(.trydan-bar__range:focus-visible) .trydan-bar__grip{
  outline:2px solid var(--t-ink);outline-offset:3px;
}

/* cuando la casa se lo come todo, la carga del coche se para */
.trydan-lp .trydan-bar.is-parado .trydan-bar__coche{
  background:var(--t-relleno);color:var(--t-body);
}

/* ── el minimo de 1,4 kW, dibujado desde el principio ──────────────
   No es un estado que aparece de golpe: es un sitio de la barra que se ve
   venir. Y ocupa lo que le toca EN LA ESCALA de la potencia elegida, asi que
   a 3,45 kW son el 41 % de la barra y a 6,90 solo el 20 %. Cambiar de ficha y
   ver la franja encogerse es el argumento entero, sin texto que lo explique. */
.trydan-lp .trydan-bar__min{
  position:absolute;top:0;right:0;bottom:0;
  width:var(--t-min);
  border-radius:2px 12px 12px 2px;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.34) 0 5px, rgba(255,255,255,0) 5px 11px);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.5);
  pointer-events:none;z-index:1;
  transition:width .32s var(--t-ease);
}
/* Parado no es un fallo: la casa esta usando lo suyo y el coche espera. Va
   en gris, no en rojo. */
.trydan-lp .trydan-bar.is-parado .trydan-bar__min{
  background:repeating-linear-gradient(135deg,
    rgba(46,46,42,.16) 0 5px, rgba(46,46,42,0) 5px 11px);
  box-shadow:inset 1px 0 0 rgba(46,46,42,.28);
}
/* la leyenda va alineada a la derecha, debajo de la franja que nombra */
.trydan-lp .trydan-bar__leyenda{
  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
  margin:0 0 .75rem;
  font-size:var(--t-fs-rot);
  line-height:1.3;letter-spacing:.05em;color:var(--t-tenue);
  text-wrap:balance;      /* si parte, en dos mitades: nunca con un kW huerfano */
}
.trydan-lp .trydan-bar__leyenda::before{
  content:"";flex:none;width:1.75rem;height:.8rem;border-radius:3px;
  /* la muestra es lo que nombra: la misma trama sobre el mismo naranja */
  background:var(--t-accent);
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.5) 0 4px, rgba(255,255,255,0) 4px 9px);
}
/* El aviso se escribe SOLO al cruzar el umbral, no en cada arrastre: con
   role=status, reescribirlo en cada pixel haria hablar al lector sin parar.
   Vacio no ocupa, asi que no hay que tocar ninguna clase para esconderlo. */
.trydan-lp .trydan-bar__aviso{
  margin:.85rem 0 0;padding:.7rem .95rem;
  background:var(--t-sup);
  border-left:3px solid var(--t-ink);border-radius:0 var(--t-r-btn) var(--t-r-btn) 0;
  font-size:var(--t-fs-sec);line-height:1.45;
  color:var(--t-body);
}
.trydan-lp .trydan-bar__aviso:empty{display:none}

/* ── elegir la potencia contratada ─────────────────────────────────
   Fichas y no un segundo deslizable: la potencia contratada no es algo que
   se explore, es un dato que ya sabes y que esta en tu factura. */
.trydan-lp .trydan-kw{margin:0}
.trydan-lp .trydan-kw__h{
  margin:0 0 .5rem;font-size:var(--t-fs-h3);
  font-weight:400;line-height:1.25;letter-spacing:-.015em;color:var(--t-ink);text-wrap:balance;
}
.trydan-lp .trydan-kw__ayuda{
  margin:0 0 clamp(1.25rem,2.4vw,2rem);
  font-size:var(--t-fs-p);line-height:1.6;color:var(--t-body);
}
.trydan-lp .trydan-kw__fichas{display:flex;flex-wrap:wrap;gap:.5rem}
/* El radio de verdad, invisible pero presente: da las flechas del teclado y
   el grupo al lector de pantalla, y el estado sale de :checked sin JS. */
.trydan-lp .trydan-kw__r{
  position:absolute;width:1px;height:1px;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.trydan-lp .trydan-kw__f{
  display:grid;place-items:center;
  min-width:4.75rem;padding:.6rem .9rem;
  background:transparent;border:1px solid var(--t-linea);border-radius:var(--t-r-btn);
  font-size:var(--t-fs-sec);font-weight:500;line-height:1.2;
  color:var(--t-ink);cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s var(--t-ease),background-color .2s var(--t-ease);
}
.trydan-lp .trydan-kw__f:hover{border-color:var(--t-hover)}
/* La elegida se marca en tinta llena, no en naranja: el naranja se reserva
   para la barra del coche. Blanco sobre tinta da 13,6:1. */
.trydan-lp .trydan-kw__r:checked+.trydan-kw__f{
  border-color:var(--t-ink);
  background:var(--t-ink);color:var(--t-panel);
}
.trydan-lp .trydan-kw__r:focus-visible+.trydan-kw__f{
  outline:2px solid var(--t-ink);outline-offset:2px;
}
/* Los campos del sitio vienen con estilo OSCURO global, asi que hay que
   escribir el claro entero y no solo lo que falta. */
.trydan-lp .trydan-kw__otra{
  display:flex;align-items:center;gap:.6rem;
  max-width:24rem;margin-top:.75rem;
  padding:.3rem .3rem .3rem .95rem;
  background:var(--t-sup);border-radius:var(--t-r-btn);
}
.trydan-lp .trydan-kw__otra[hidden]{display:none}
.trydan-lp .trydan-kw__campo{
  flex:1 1 auto;min-width:0;
  margin:0;padding:.5rem 0;
  background:transparent;border:0;outline:0;box-shadow:none;
  font-family:inherit;font-size:var(--t-fs-p);
  color:var(--t-ink);font-variant-numeric:tabular-nums;
}
.trydan-lp .trydan-kw__campo::placeholder{color:var(--t-tenue);opacity:1}
.trydan-lp .trydan-kw__campo:focus-visible{outline:0}
.trydan-lp .trydan-kw__otra:focus-within{box-shadow:0 0 0 2px var(--t-ink)}
.trydan-lp .trydan-kw__u{
  flex:none;font-size:var(--t-fs-rot);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t-tenue);
}
.trydan-lp .trydan-kw__ok{
  flex:none;display:grid;place-items:center;
  width:2.5rem;height:2.5rem;padding:0;
  background:var(--t-ink);color:var(--t-panel);
  border:0;border-radius:var(--t-r-btn);cursor:pointer;
  transition:opacity .2s var(--t-ease);
}
.trydan-lp .trydan-kw__ok:hover{opacity:.82}
.trydan-lp .trydan-kw__ok:focus-visible{outline:2px solid var(--t-ink);outline-offset:2px}

/* ═══ 04 · FOTOVOLTAICA ════════════════════════════════════════════════
   Imagen a sangre, de borde a borde, con la tarjeta encima a la derecha.
   La seccion adopta la proporcion exacta de la foto (2560/1754 = 1,46), que
   es la misma de la referencia.
   En movil no se superpone nada: la foto arriba y la tarjeta debajo. */

/* La seccion: cabecera centrada y una foto ancha con el "Conoce mas" encima. */
.trydan-sol{
  background:#fff;text-align:center;
  padding-inline:var(--t-gutter-sec);
  padding-block:clamp(3rem,7vw,8.5rem);
}
.trydan-sol .trydan-h2{max-width:16ch;margin-inline:auto}
.trydan-sol .trydan-body{max-width:46ch;margin-inline:auto}
.trydan-sol__media{width:100%;margin:clamp(2rem,4vw,4rem) auto 0}
@media(min-width:48rem){.trydan-sol__media{width:80vw;max-width:none}}
.trydan-sol__media>.wp-block-group__inner-container{position:relative}
/* la foto va dentro de un div alineado a la izquierda y NO es clicable ni arrastrable.
   La pildora "Conoce mas" queda FUERA de este div, asi que sigue siendo pulsable. */
.trydan-lp .trydan-sol__foto{
  display:flex;justify-content:flex-start;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
.trydan-lp .trydan-sol__foto .trydan-sol__img{width:100%}
.trydan-lp .trydan-sol__img img{-webkit-user-drag:none}
.trydan-lp .trydan-sol__img{margin:0}
.trydan-lp .trydan-sol__img img{
  display:block;width:100%;height:auto;
  aspect-ratio:16 / 9;object-fit:cover;object-position:50% 50%;
  border-radius:var(--t-r-media);
}
.trydan-lp .trydan-mas__linea.trydan-sol__mas{
  position:absolute;right:clamp(.75rem,2.5vw,2.5rem);bottom:clamp(.75rem,2.5vw,2.5rem);
  margin:0;
}
.trydan-lp .trydan-sol__mas .trydan-mas{box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
/* Es un boton, no un enlace: su unica accion es abrir la ventana. Se le quita
   lo que el tema da a todo <button>. */
.trydan-lp button.trydan-mas{
  margin:0;font-family:inherit;letter-spacing:normal;text-transform:none;text-shadow:none;
}
.trydan-lp .trydan-h2--card{
  font-size:clamp(1.5rem,2.1vw,2.625rem);
  line-height:1.14;
}
/* chips de inversores: contorno naranja, como en la referencia */
.trydan-lp .trydan-chips{
  list-style:none;margin:clamp(1.5rem,2.4vw,2.75rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(.5rem,.65vw,.8125rem);
}
.trydan-lp .trydan-chips li{
  border:1px solid var(--t-accent);
  color:var(--t-accent);
  border-radius:999px;
  padding:.6em 1.15em;
  font-size:clamp(.8125rem,.95vw,1.1875rem);
  line-height:1.2;
}

/* ── el desplegable de nivel 2 ──────────────────────────────────── */
/* El "+" prometia despliegue, asi que despliega: <details> nativo, sin JS. */
.trydan-lp .trydan-more{
  background:#F7F6F4;
  border-radius:clamp(1rem,1.6vw,2rem);
  width:100%;
}
@media(min-width:64rem){
  .trydan-lp .trydan-more{width:47vw}     /* 940 de 2000 */
}
.trydan-lp .trydan-more__sum{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:clamp(.75rem,.9vw,1.15rem) clamp(1rem,1.5vw,1.9rem);
  min-height:clamp(3rem,2.85vw,3.5625rem);
}
.trydan-lp .trydan-more__sum::-webkit-details-marker{display:none}
.trydan-lp .trydan-more__txt{
  font-size:clamp(.875rem,1vw,1.25rem);
  line-height:1.4;color:var(--t-body);
}
.trydan-lp .trydan-more__ico{
  position:relative;flex:none;
  width:clamp(2rem,2vw,2.5rem);height:clamp(2rem,2vw,2.5rem);
  border-radius:999px;background:#E9E7E3;
  transition:background-color .25s var(--t-ease);
}
.trydan-lp .trydan-more__ico::before,
.trydan-lp .trydan-more__ico::after{
  content:"";position:absolute;top:50%;left:50%;
  width:42%;height:1.5px;background:var(--t-ink);
  transform:translate(-50%,-50%);
  transition:transform .25s var(--t-ease),opacity .25s var(--t-ease);
}
.trydan-lp .trydan-more__ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.trydan-lp .trydan-more[open] .trydan-more__ico::after{
  transform:translate(-50%,-50%) rotate(0deg);opacity:0;
}
.trydan-lp .trydan-more__sum:hover .trydan-more__ico,
.trydan-lp .trydan-more__sum:focus-visible .trydan-more__ico{background:#DEDBD5}
.trydan-lp .trydan-more__body{
  padding:0 clamp(1rem,1.5vw,1.9rem) clamp(1.25rem,1.8vw,2.25rem);
  display:flex;flex-direction:column;gap:.75rem;
}
.trydan-lp .trydan-more__body p{
  margin:0;font-size:clamp(.875rem,.95vw,1.125rem);
  line-height:1.6;color:var(--t-body);
}
.trydan-lp .trydan-more__body strong{color:var(--t-ink);font-weight:600}
/* lo que falta por confirmar, en rojo V2C: nunca un dato inventado */
.trydan-lp .trydan-todo{color:#C22B24!important}

/* ═══ SANGRADO: romper el contenedor de 1275px del tema ═══════════════
   El envoltorio de pagina es .site.grid-container con max-width:1275px, y el
   body lleva full-width-content, que NO lo anula. Ademas .site-content mete
   40px de padding (30px por debajo de 768px). Resultado: todo el contenido
   estaba capado a 1195px utiles, muy por debajo del diseno.

   La regla alignfull del tema no sirve aqui: esta tras body:not(.no-sidebar)
   y este body SI lleva no-sidebar.

   calc(50% - 50vw) da una caja de 100vw centrada en el centro del padre, y el
   padre esta centrado en el viewport, asi que cuadra a cero por los dos lados
   sea cual sea el padding de los envoltorios. */
.trydan-lp{
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
}

/* 100vw incluye la barra de scroll. overflow-x:clip lo recorta SIN crear
   contexto de scroll, asi que no rompe position:sticky (hidden si lo haria).
   Solo se aplica en esta pagina: el snippet no se carga en ninguna otra. */
html{overflow-x:clip}



/* ═══ 05 · ECOCHARGING ═════════════════════════════════════════════════ */

/* El fondo, la calle y la rejilla de "texto | foto" los declara la seccion 03
   junto con esta. Los valores son los que tenia eco, asi que eco no se mueve;
   la que se ha alineado con ella es control de potencia. */
.trydan-eco__media>.wp-block-group__inner-container{position:relative}
.trydan-lp .trydan-eco__img{margin:0}
.trydan-lp .trydan-eco__img img{
  display:block;width:100%;height:auto;
  aspect-ratio:960/900;object-fit:cover;
  border-radius:var(--t-r-media);
}

/* El radio partido de las dos fotos que salen a sangre. VA AQUI, DESPUES de los
   dos radios completos: un @media no suma especificidad, asi que puesto antes
   lo pisaba el radio completo y no se aplicaba nunca. */
@media(min-width:64rem){
  .trydan-lp .trydan-potencia__img img,
  .trydan-lp .trydan-eco__img img{border-radius:var(--t-r-media) 0 0 var(--t-r-media)}
}

/* ── la tarjeta del grafico: contorno naranja, fondo blanco ─────── */
.trydan-lp .trydan-eco__card{
  margin-top:clamp(3rem,5vw,6rem);
  background:#fff;
  border:1px solid var(--t-accent);
  border-radius:clamp(1rem,1.25vw,1.5rem);
  padding:clamp(1.5rem,3.5vw,4.375rem);
}
.trydan-eco__grid>.wp-block-group__inner-container{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
@media(min-width:64rem){
  .trydan-eco__grid>.wp-block-group__inner-container{
    grid-template-columns:1fr 1.35fr;
    gap:clamp(2rem,6vw,7.5rem);
  }
}
.trydan-lp .trydan-lead{
  margin:0;
  font-size:clamp(1.125rem,.8125rem + .625vw,1.625rem);   /* mismo escalon que .trydan-sub */
  font-weight:600;line-height:1.35;color:var(--t-accent);
  text-wrap:balance;
}
.trydan-lp .trydan-eco__lead .trydan-body{
  margin-top:clamp(1rem,1.6vw,2rem);max-width:none;
}

/* ── el grafico de 24 horas ─────────────────────────────────────── */
.trydan-lp .trydan-eco__chart{margin:0}
.trydan-lp .trydan-eco__key{
  list-style:none;margin:0 0 clamp(1rem,1.8vw,2.25rem);padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem clamp(1rem,1.6vw,2rem);
}
.trydan-lp .trydan-eco__key li{
  display:flex;align-items:center;gap:.5em;
  font-size:clamp(.75rem,.85vw,1.0625rem);color:var(--t-body);
}
.trydan-lp .trydan-eco__key li::before{
  content:"";width:.72em;height:.72em;border-radius:999px;
  background:#DEDBD5;flex:none;
}
.trydan-lp .trydan-eco__key li.is-on::before{background:var(--t-accent)}

/* la barra es un ::after dentro de una columna a altura completa, para que
   toda la columna sea zona de hover: barras de 15px son imposibles de apuntar */
.trydan-lp .trydan-eco__bars{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:flex-end;
  gap:clamp(2px,.5vw,10px);
  height:clamp(9rem,15vw,19rem);
}
.trydan-lp .trydan-eco__b{
  flex:1 1 0;position:relative;height:100%;
  display:flex;align-items:flex-end;
}
.trydan-lp .trydan-eco__b::after{
  content:"";display:block;width:100%;height:0;
  border-radius:999px;background:#DEDBD5;
  transition:height .85s var(--t-ease),background-color .2s ease;
  transition-delay:calc(var(--i) * 26ms),0ms;
}
.trydan-lp .trydan-eco__bars.is-visible .trydan-eco__b::after{
  height:calc(var(--h) * 100%);
}
.trydan-lp .trydan-eco__b.is-on::after{background:var(--t-accent)}
.trydan-lp .trydan-eco__b:hover::after{background:var(--t-ink)}
.trydan-lp .trydan-eco__b.is-on:hover::after{background:var(--t-accent-dark)}

/* el globo del precio */
.trydan-lp .trydan-eco__tip{
  position:absolute;left:50%;
  bottom:calc(var(--h) * 100% + 12px);
  transform:translateX(-50%);
  background:#fff;border:1px solid var(--t-accent);color:var(--t-accent);
  border-radius:8px;padding:.3em .6em;
  font-size:clamp(.75rem,.7vw,.875rem);font-weight:600;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .22s var(--t-ease);
}
.trydan-lp .trydan-eco__tip::after{
  content:"";position:absolute;top:100%;left:50%;
  width:8px;height:8px;margin-left:-4px;margin-top:-4px;
  background:#fff;
  border-right:1px solid var(--t-accent);
  border-bottom:1px solid var(--t-accent);
  transform:rotate(45deg);
}
/* por defecto se ve la hora mas barata; al pasar el raton manda el hover */
.trydan-lp .trydan-eco__bars.is-visible .is-default .trydan-eco__tip{opacity:1}
.trydan-lp .trydan-eco__bars:hover .is-default .trydan-eco__tip{opacity:0}
.trydan-lp .trydan-eco__b:hover .trydan-eco__tip{opacity:1}

.trydan-lp .trydan-eco__axis{
  list-style:none;margin:clamp(.5rem,.8vw,1rem) 0 0;padding:0;
  display:flex;gap:clamp(2px,.5vw,10px);
}
.trydan-lp .trydan-eco__axis li{
  flex:1 1 0;text-align:center;
  font-size:clamp(.75rem,.65vw,.8125rem);color:var(--t-body);
  font-variant-numeric:tabular-nums;
}
.trydan-lp .trydan-eco__chart .trydan-todo{
  margin:clamp(1rem,1.6vw,2rem) 0 0;
  font-size:clamp(.75rem,.75vw,.9375rem);line-height:1.5;
}

/* ═══ 06 · V2C ASSISTANT ═══════════════════════════════════════════════
   Unica seccion oscura, y con acento propio: verde lima #CDFF50 en vez del
   naranja de la pagina. Es la identidad del asistente, no un desliz.
   Valores del Figma: fondo #000, radio 44px y
   box-shadow -2px -2px 12.2px rgba(205,255,80,.31). */

@property --v2c-ang{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

.trydan-ia{
  --v2c-verde:#CDFF50;
  background:
    radial-gradient(62% 46% at 50% 28%, rgba(255,255,255,.05), transparent 72%),
    #121212;
  color:#fff;
  padding-block:clamp(3.5rem,8vw,10rem);
  padding-inline:clamp(1.25rem,6vw,7.5rem);
}
.trydan-ia>.wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(1.25rem,2.4vw,2.75rem);
}

/* ── pildora superior ───────────────────────────────────────────── */
.trydan-lp .trydan-ia__badge{
  margin:0;display:inline-flex;align-items:center;gap:.55em;
  background:#0B0B0B;
  border:1px solid rgba(205,255,80,.55);
  border-radius:999px;padding:.5em 1.15em;
  color:var(--v2c-verde);
  font-size:clamp(.75rem,.85vw,1rem);font-weight:600;
  box-shadow:0 0 20px rgba(205,255,80,.3),inset 0 0 12px rgba(205,255,80,.08);
}
.trydan-lp .trydan-ia__badge img{width:1.15em;height:auto;display:block}

.trydan-lp .trydan-h2--ia{
  margin:0;color:#fff;max-width:26ch;
}

/* ── el marco con el borde verde animado ────────────────────────────
   El borde es un conic-gradient girando en el padding de 1.5px del marco;
   dentro, la pantalla en negro lo tapa todo menos el anillo.
   Sin soporte de @property el angulo no interpola y el borde queda quieto:
   degrada a un aro verde estatico, que es aceptable. */
.trydan-lp .trydan-ia__frame{
  --v2c-ang:0deg;
  width:min(71vw,1280px);
  padding:1.5px;
  border-radius:44px;
  background:conic-gradient(from var(--v2c-ang),
    rgba(205,255,80,.10) 0deg,
    rgba(205,255,80,.95) 42deg,
    rgba(205,255,80,.28) 112deg,
    rgba(205,255,80,.10) 205deg,
    rgba(205,255,80,.10) 360deg);
  box-shadow:-2px -2px 12.2px rgba(205,255,80,.31),0 0 150px rgba(205,255,80,.05);
  animation:v2c-borde 7s linear infinite;
}
@keyframes v2c-borde{to{--v2c-ang:360deg}}

.trydan-lp .trydan-ia__screen{
  position:relative;
  border-radius:42.5px;
  background:#000;
  aspect-ratio:1280/630;
  overflow:hidden;
  padding:clamp(1rem,2.6vw,2.75rem);
  display:flex;flex-direction:column;justify-content:flex-end;
}

/* estado en reposo: el icono latiendo en el centro */
.trydan-lp .trydan-ia__idle{
  position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .55s var(--t-ease);
}
.trydan-lp .trydan-ia__screen.is-live .trydan-ia__idle{opacity:0}
.trydan-lp .trydan-ia__orb{
  display:grid;place-items:center;
  width:clamp(2.75rem,3.4vw,3.75rem);aspect-ratio:1;
  border-radius:999px;
  border:1px solid rgba(205,255,80,.5);
  box-shadow:0 0 24px rgba(205,255,80,.35);
  animation:v2c-late 2.6s ease-in-out infinite;
}
.trydan-lp .trydan-ia__orb img{width:52%;height:auto;display:block}
@keyframes v2c-late{
  0%,100%{box-shadow:0 0 18px rgba(205,255,80,.25);transform:scale(1)}
  50%    {box-shadow:0 0 34px rgba(205,255,80,.45);transform:scale(1.05)}
}

/* ── la conversacion ────────────────────────────────────────────── */
.trydan-lp .trydan-ia__chat{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  gap:clamp(.4rem,.85vw,.9rem);
  text-align:left;
}
.trydan-lp .trydan-ia__msg{
  max-width:min(64%,32rem);
  padding:.78em 1.1em;border-radius:20px;
  font-size:clamp(.8125rem,.95vw,1.0625rem);line-height:1.5;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--t-ease),transform .45s var(--t-ease);
}
.trydan-lp .trydan-ia__msg.is-in{opacity:1;transform:none}
.trydan-lp .trydan-ia__msg.is-user{
  align-self:flex-end;background:#F2F1EE;color:#131311;
  border-bottom-right-radius:6px;
}
.trydan-lp .trydan-ia__msg.is-ia{
  align-self:flex-start;
  background:rgba(205,255,80,.07);
  border:1px solid rgba(205,255,80,.22);
  color:rgba(255,255,255,.92);
  border-bottom-left-radius:6px;
}
/* los tres puntos ocupan el sitio del texto mientras "escribe" */
.trydan-lp .trydan-ia__dots{display:none;align-items:center;gap:.32em}
.trydan-lp .trydan-ia__msg.is-typing .trydan-ia__dots{display:inline-flex}
.trydan-lp .trydan-ia__msg.is-typing .trydan-ia__txt{display:none}
.trydan-lp .trydan-ia__dots i{
  width:.42em;height:.42em;border-radius:999px;background:var(--v2c-verde);
  animation:v2c-punto 1.05s ease-in-out infinite;
}
.trydan-lp .trydan-ia__dots i:nth-child(2){animation-delay:.14s}
.trydan-lp .trydan-ia__dots i:nth-child(3){animation-delay:.28s}
@keyframes v2c-punto{
  0%,62%,100%{opacity:.25;transform:translateY(0)}
  31%{opacity:1;transform:translateY(-2px)}
}

/* ── pregunta, respuesta y chips ────────────────────────────────── */
.trydan-lp .trydan-ia__q{
  margin:clamp(1rem,1.6vw,2rem) 0 0;color:#fff;
  font-size:clamp(1rem,1.05vw,1.25rem);   /* estaba en 24, por encima del parrafo */font-weight:600;line-height:1.4;
}
.trydan-ia .trydan-body{
  margin:0;max-width:74ch;color:rgba(255,255,255,.62);
}
.trydan-lp .trydan-ia__asks{
  list-style:none;margin:clamp(1rem,1.8vw,2.25rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
}
.trydan-lp .trydan-ia__asks li{
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.72);
  border-radius:999px;padding:.62em 1.2em;
  font-size:clamp(.75rem,.85vw,1rem);
}
.trydan-lp .trydan-ia__asks li.is-on{
  background:#F2F1EE;color:#131311;border-color:#F2F1EE;
}

/* ── aparicion escalonada de los elementos de la seccion ────────── */
.trydan-anim>.wp-block-group__inner-container>*{
  opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--t-ease),transform .75s var(--t-ease);
}
.trydan-anim.is-in>.wp-block-group__inner-container>*{opacity:1;transform:none}
.trydan-anim.is-in>.wp-block-group__inner-container>*:nth-child(1){transition-delay:0ms}
.trydan-anim.is-in>.wp-block-group__inner-container>*:nth-child(2){transition-delay:90ms}
.trydan-anim.is-in>.wp-block-group__inner-container>*:nth-child(3){transition-delay:180ms}
.trydan-anim.is-in>.wp-block-group__inner-container>*:nth-child(4){transition-delay:300ms}
.trydan-anim.is-in>.wp-block-group__inner-container>*:nth-child(5){transition-delay:370ms}
.trydan-anim.is-in>.wp-block-group__inner-container>*:nth-child(6){transition-delay:440ms}

@media(prefers-reduced-motion:reduce){
  .trydan-lp .trydan-ia__frame,
  .trydan-lp .trydan-ia__orb,
  .trydan-lp .trydan-ia__dots i{animation:none}
  .trydan-anim>.wp-block-group__inner-container>*{opacity:1;transform:none}
}

/* ═══ 07 · LA APP ══════════════════════════════════════════════════════
   Collage: cuatro pantallas arriba (las dos de los extremos sangran por los
   lados) y tres tarjetas abajo. Radio y sombra en CSS, no cocidos en la
   imagen: asi escalan con el viewport y la sombra no deja canto duro.

   Medidas de la referencia: pantalla 20,7vw, hueco 8,9vw, la fila mide
   109,5vw y va centrada, asi que sobresale 4,75vw por cada lado. */

.trydan-app{
  background:#fff;
  padding-block:clamp(3rem,6vw,7.5rem) clamp(3.5rem,7vw,9rem);
  padding-inline:0;
  overflow:clip;            /* recorta las pantallas de los extremos */
}
.trydan-app>.wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(2rem,4vw,5rem);
}

/* ── grupo de arriba: cuatro pantallas ──────────────────────────── */
.trydan-lp .trydan-app__cluster{
  display:flex;justify-content:center;align-items:flex-start;
  width:109.5vw;flex:none;
  gap:clamp(.75rem,8.9vw,10rem);
}
.trydan-lp .trydan-app__shot{
  margin:0;flex:none;
  width:clamp(6.5rem,20.7vw,24rem);
}
/* escalonado vertical de la referencia: los laterales caen ~17vw */
.trydan-lp .trydan-app__shot.is-side{margin-top:clamp(1.5rem,17vw,15rem)}
.trydan-lp .trydan-app__shot.is-front.is-b{margin-top:clamp(.5rem,5.2vw,4.5rem)}

/* ── grupo de abajo: tres tarjetas ──────────────────────────────── */
.trydan-lp .trydan-app__cards{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(.75rem,4.9vw,5.5rem);
  width:100%;
}
.trydan-lp .trydan-app__card{margin:0;flex:none}
.trydan-lp .trydan-app__card.is-small{width:clamp(5.5rem,14.2vw,16rem)}
.trydan-lp .trydan-app__card.is-big{width:clamp(9.5rem,24.1vw,27rem)}

/* radio y sombra SOLO en los moviles de arriba. Las tres tarjetas de abajo
   ya las traen cocidas en el JPG: si se las anado, salen dobles. */
.trydan-lp .trydan-app__shot img{
  display:block;width:100%;height:auto;
  border-radius:clamp(.625rem,1.5vw,1.5rem);
  box-shadow:
    0 32px 64px -24px rgba(20,18,14,.30),
    0 8px 22px -12px rgba(20,18,14,.14);
}

/* ── el texto del medio ─────────────────────────────────────────── */
.trydan-app__txt>.wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.75rem,1.4vw,1.5rem);
  padding-inline:clamp(1.25rem,6vw,7.5rem);
}
.trydan-app .trydan-body{margin:0;max-width:62ch}
.trydan-app .trydan-h2{margin:0}
/* la pildora del desplegable, aqui centrada y de ancho automatico */
.trydan-lp .trydan-more--inline{
  width:auto;max-width:100%;
  margin-top:clamp(.75rem,1.6vw,1.75rem);
  text-align:left;
}
@media(min-width:64rem){.trydan-lp .trydan-more--inline{width:auto}}

/* las tres tarjetas de abajo van sin radio ni sombra de CSS */
.trydan-lp .trydan-app__card img{
  display:block;width:100%;height:auto;
  border-radius:0;
  box-shadow:none;
}

/* ── velo blanco sobre el collage superior ──────────────────────────
   Del Figma: degradado lineal blanco 100% → blanco 0%, 1280x303 sobre un
   frame de 1280, o sea todo el ancho y un 23,7% de la altura del frame.
   Difumina el borde superior de las capturas contra el fondo blanco. */
.trydan-app{position:relative}
.trydan-lp .trydan-app__velo{
  position:absolute;left:0;right:0;top:0;
  /* ancho completo de la SECCION, no del cluster, y altura en vw. En % de la
     altura del cluster cortaba cada imagen en un punto distinto, porque los
     items estan a alturas distintas, y se leia como un degradado por imagen.
     303 de 1280 en el Figma = 23,7vw. */
  height:clamp(6rem,23.7vw,20rem);
  background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:3;
}
/* ── deslizamiento por scroll, con JS ───────────────────────────────
   UN SOLO recorrido continuo, no dos fases cortas. Lo de las fases se sentia
   a saltos: cada una duraba media pantalla y se encadenaban demasiado rapido.

   --t   posicion en el recorrido completo, 0 → 1. Cubre desde que el borde
         superior toca el fondo del viewport hasta que el inferior sale por
         arriba: en estas capturas son casi dos pantallas de scroll, asi que
         el movimiento es largo y suave por construccion.
         La Y es LINEAL en --t. Lineal en scroll = velocidad constante = suave.
         Meter easing aqui es lo que produce tirones.
   --esc  escala. Sube durante el primer 42% del recorrido y SE QUEDA: una vez
         crecida la captura no vuelve a encogerse.
   --o   opacidad. Entra en el primer 24% y se va en el ultimo 16%.

   --amp separa las capas: los laterales recorren mas que los frontales. */
.trydan-lp [data-trydan-zoom]{
  --t:.5;
  --esc:1;
  --o:1;
  --amp:1;
  --esc-d:.12;
  will-change:transform,opacity;
}
@media (prefers-reduced-motion:no-preference){
  .trydan-lp [data-trydan-zoom]{
    transform-origin:50% 55%;
    opacity:var(--o);
    /* translateY antes de scale: si va despues, el desplazamiento se multiplica
       por la escala y las capas se desincronizan. */
    transform:
      translateY(calc((.5 - var(--t)) * 190px * var(--amp)))
      scale(calc(1 - (1 - var(--esc)) * var(--esc-d) * var(--amp)));
  }
}

/* ═══ 08 · DISEÑO Y FABRICACION EUROPEA ════════════════════════════════ */

.trydan-fab{
  background:#F5F4F2;
  padding-block:clamp(3rem,7vw,8.5rem);
  padding-inline:0;
}
.trydan-fab>.wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(2.5rem,5.5vw,7rem);
}

/* Foto de arriba: arranca con EXACTAMENTE el mismo ancho que el banner del
   hero, y comparte con el la apertura a todo el ancho al bajar.

   Ojo con la diferencia de contenedor: la seccion del hero lleva el gutter en
   su padding, pero esta seccion va con padding-inline:0 porque el carrusel
   tiene que llegar de lado a lado. Sin compensarlo, la imagen arrancaba ya a
   100vw, o sea "muy grande desde el principio". Se compensa con su propio
   margen, que se cierra a cero conforme --abre llega a 1.

   Con --esc-d:0 en el markup no cambia de escala: conserva solo el
   deslizamiento en Y. */
.trydan-lp .trydan-fab__hero{
  --abre:0;
  width:auto;max-width:none;
  margin:0 calc((1 - var(--abre)) * var(--t-gutter));
}
.trydan-lp .trydan-fab__hero img{
  display:block;width:100%;height:auto;
  aspect-ratio:2364/1308;object-fit:cover;
  border-radius:calc((1 - var(--abre)) * var(--t-r-media));
}

/* texto centrado */
.trydan-fab__txt>.wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.75rem,1.4vw,1.5rem);
  padding-inline:clamp(1.25rem,6vw,7.5rem);
}
.trydan-fab .trydan-h2{margin:0;max-width:26ch}
.trydan-fab .trydan-body{margin:0;max-width:52ch}

/* ── carrusel infinito de produccion ─────────────────────────────────
   Las seis van duplicadas y la pista se desplaza sola hacia la izquierda,
   La mueve rAF y no @keyframes, porque con
   una animacion CSS no se puede bajar la velocidad al pasar el raton sin dar
   un salto.

   Al pasar el raton esa imagen crece y empuja a las vecinas, y el JS compensa
   la pista media anchura de crecimiento para que la expansion se vea CENTRADA
   y no desplazada hacia la derecha.

   ALTURA FIJA DEL CONTENEDOR = la de la imagen expandida, con los items
   centrados: al crecer una rellena el hueco ya reservado y la seccion no da
   ningun salto.

   ALTURA EXPLICITA en los dos estados, no heredada del aspect-ratio de la
   imagen: depender del tamano intrinseco es lo que las desalineaba.

   Los bordes se desvanecen con mask-image, no con divs encima: asi funciona
   sobre cualquier fondo sin acertar el color. */
.trydan-lp .trydan-fab__gal{
  --w:max(9rem,16vw);
  --w-on:max(13rem,23vw);
  --gap:2.5vw;
  --alto:calc(var(--w-on) * 590 / 514);
  --aire:clamp(1rem,2vw,1.75rem);

  width:100%;
  padding:var(--aire) 0;
  min-height:calc(var(--alto) + 2 * var(--aire));
  display:flex;align-items:center;
  overflow:hidden;
  cursor:default;
  /* Desvanecido largo y CON CURVA. Un degradado de dos paradas da una rampa de
     opacidad lineal, y eso se percibe seco en los extremos. Con paradas
     intermedias que aproximan una ese, el corte deja de notarse.
     18% de recorrido por lado en vez del 6% de antes. */
  --velo:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.05) 3%,
    rgba(0,0,0,.18) 6%,
    rgba(0,0,0,.42) 10%,
    rgba(0,0,0,.72) 14%,
    rgba(0,0,0,.92) 17%,
    #000 20%,
    #000 80%,
    rgba(0,0,0,.92) 83%,
    rgba(0,0,0,.72) 86%,
    rgba(0,0,0,.42) 90%,
    rgba(0,0,0,.18) 94%,
    rgba(0,0,0,.05) 97%,
    rgba(0,0,0,0) 100%);
  -webkit-mask-image:var(--velo);
          mask-image:var(--velo);
}
.trydan-lp .trydan-fab__track{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;
  gap:var(--gap);
  width:max-content;
  will-change:transform;
}

.trydan-lp .trydan-fab__i{
  flex:none;
  width:var(--w);
  height:calc(var(--w) * 590 / 514);
  border-radius:var(--t-r-media);
  overflow:hidden;
  opacity:0;
  /* transicion de VUELTA: mas lenta y mas suave */
  transition:
    width 1.05s cubic-bezier(.16,1,.3,1),
    height 1.05s cubic-bezier(.16,1,.3,1),
    opacity .8s var(--t-ease);
}
.trydan-lp .trydan-fab__i img{
  display:block;width:100%;height:100%;
  object-fit:cover;
}
@media (hover:hover){
  .trydan-lp .trydan-fab__i:hover{
    width:var(--w-on);
    height:calc(var(--w-on) * 590 / 514);
    /* la IDA, mas corta: responde al raton sin sentirse perezosa */
    transition:
      width .5s cubic-bezier(.22,1,.36,1),
      height .5s cubic-bezier(.22,1,.36,1),
      opacity .8s var(--t-ease);
  }
}

/* entrada escalonada, solo opacidad: la pista ya se mueve, un salto en Y
   ademas quedaria recargado */
.trydan-lp .trydan-fab__gal.is-in .trydan-fab__i{opacity:1}
.trydan-lp .trydan-fab__gal.is-in .trydan-fab__i:nth-child(1){transition-delay:0ms,0ms,0ms}
.trydan-lp .trydan-fab__gal.is-in .trydan-fab__i:nth-child(2){transition-delay:0ms,0ms,80ms}
.trydan-lp .trydan-fab__gal.is-in .trydan-fab__i:nth-child(3){transition-delay:0ms,0ms,160ms}
.trydan-lp .trydan-fab__gal.is-in .trydan-fab__i:nth-child(4){transition-delay:0ms,0ms,240ms}
.trydan-lp .trydan-fab__gal.is-in .trydan-fab__i:nth-child(5){transition-delay:0ms,0ms,320ms}
.trydan-lp .trydan-fab__gal.is-in .trydan-fab__i:nth-child(6){transition-delay:0ms,0ms,400ms}

@media (prefers-reduced-motion:reduce){
  .trydan-lp .trydan-fab__i{opacity:1}
}

/* ═══ 09 · CONFIGURA TU TRYDAN ═════════════════════════════════════════
   Dos columnas: texto a la izquierda, foto a la derecha A SANGRE. El texto va
   centrado verticalmente respecto a la foto.

   La foto cancela con un margen negativo el padding derecho de la seccion y
   llega justo al borde de la pantalla, con radio solo en las esquinas
   izquierdas. Mismo patron que las secciones de potencia y fotovoltaica.

   En movil, apilado, vuelve a llevar gutter y radio en las cuatro esquinas:
   una foto pegada al borde con radio a medias queda mal. */

.trydan-cfg{
  background:var(--t-bg);
  padding-block:clamp(3rem,7vw,8.5rem);
  padding-inline:var(--t-gutter-sec);
}
.trydan-cfg__grid>.wp-block-group__inner-container{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,5vw,6.25rem);
  align-items:center;
}
.trydan-cfg__txt>.wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(.75rem,1.4vw,1.5rem);
}
.trydan-cfg .trydan-h2{margin:0;max-width:20ch}
.trydan-cfg .trydan-body{margin:0;max-width:34ch}

/* los CTA de esta seccion van alineados a la izquierda, no centrados */
.trydan-lp .wp-block-buttons.trydan-cta--izq{
  justify-content:flex-start;
  margin-top:clamp(1rem,2vw,2rem);
}

.trydan-lp .trydan-cfg__img{margin:0}
.trydan-lp .trydan-cfg__img img{
  display:block;width:100%;height:auto;
  aspect-ratio:1025/800;object-fit:cover;
  border-radius:var(--t-r-media);
}

@media(min-width:64rem){
  .trydan-cfg__grid>.wp-block-group__inner-container{grid-template-columns:1fr 1.6fr}
  /* a sangre por la derecha */
  .trydan-cfg__media{margin-right:calc(var(--t-gutter-sec) * -1)}
  .trydan-lp .trydan-cfg__img img{
    border-radius:var(--t-r-media) 0 0 var(--t-r-media);
  }
}

/* ═══ 10 · TRYDAN O TRYDAN PRO ═════════════════════════════════════════
   Comparativa en el marco "lo que llevan los dos" / "lo que anade el Pro".

   Sin un solo guion de ausencia, y aun asi se ve de golpe que el Pro tiene
   mas: repite las cinco de serie en gris y anade las suyas debajo en tinta,
   asi que su columna mide el DOBLE. La altura es lo que hace el argumento.

   El intento anterior fallaba justo aqui: la columna del Trydan tenia siete
   puntos y la del Pro cinco, o sea que el Trydan parecia el mayor de los dos.

   Dos listas, no una tabla: las dos columnas tienen distinto numero de items y
   no se corresponden fila a fila, asi que una <table> seria markup falso.
   Visualmente se lee como tabla igual. */

.trydan-vs{
  background:#fff;
  padding-block:clamp(3rem,7vw,8.5rem);
  padding-inline:clamp(1.25rem,6vw,7.5rem);
}
.trydan-vs>.wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.75rem,3.4vw,3.5rem);
}
.trydan-vs__head>.wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(.75rem,1.4vw,1.5rem);
}
.trydan-vs .trydan-h2{margin:0;max-width:30ch}
.trydan-vs .trydan-body{margin:0;max-width:62ch}

/* ── las dos columnas ───────────────────────────────────────────────── */
.trydan-lp .trydan-vs__cmp{
  width:100%;max-width:1000px;
  display:grid;grid-template-columns:1fr;
  gap:clamp(.75rem,1.4vw,1.25rem);
}
@media(min-width:52rem){
  .trydan-lp .trydan-vs__cmp{grid-template-columns:1fr 1fr}
}
.trydan-lp .trydan-vs__col{
  border-radius:var(--t-r-media);
  padding:clamp(1.5rem,2.6vw,2.5rem);
  display:flex;flex-direction:column;
  gap:clamp(.4rem,.7vw,.6rem);
}
/* la del Trydan es la de esta pagina: fondo, para que sea la que pesa */
.trydan-lp .trydan-vs__col.is-base{background:var(--t-bg)}
.trydan-lp .trydan-vs__col.is-pro{
  background:#fff;
  border:1px solid var(--t-linea);
}

.trydan-lp .trydan-vs__lab{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.6em;
  font-size:clamp(1rem,1.05vw,1.25rem);
  font-weight:600;color:var(--t-ink);letter-spacing:-.01em;
}
/* sello de mas vendido, no de "estas aqui": la clase se renombra para
   que el nombre siga contando lo que hace */
.trydan-lp .trydan-vs__sello{
  /* en em heredaba el cuerpo del titulo y en movil caia a 8,8px */
  font-size:clamp(.75rem,.7vw,.8125rem);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-accent);
  border:1px solid var(--t-accent);
  border-radius:999px;padding:.3em .7em;
}
.trydan-lp .trydan-vs__sub{
  margin:0 0 clamp(.5rem,1vw,.9rem);
  font-size:clamp(.75rem,.72vw,.8125rem);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-body);
}
.trydan-lp .trydan-vs__sub strong{color:var(--t-accent);font-weight:700}

/* las dos columnas arrancan arriba: la del Pro es mas alta a proposito */
.trydan-lp .trydan-vs__cmp{align-items:start}

.trydan-lp .trydan-vs__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
.trydan-lp .trydan-vs__list li{
  display:flex;gap:.7em;
  padding:clamp(.55rem,.9vw,.8rem) 0;
  border-bottom:1px solid var(--t-linea);
  font-size:clamp(.875rem,1vw,1.0625rem);
  line-height:1.5;color:var(--t-ink);
}
.trydan-lp .trydan-vs__list li:last-child{border-bottom:0}
/* marcador: check en lo de serie, "+" naranja en lo que anade el Pro */
.trydan-lp .trydan-vs__list li::before{
  content:"✓";
  flex:none;width:1em;
  color:var(--t-body);font-weight:600;line-height:1.5;
}

/* en la columna del Pro, lo heredado va en gris: se lee como "ya lo llevaba" */
.trydan-lp .trydan-vs__list.is-heredado li{color:var(--t-body)}
.trydan-lp .trydan-vs__list.is-heredado li::before{color:var(--t-linea)}

/* y lo que anade el Pro, en tinta con un + naranja y separado por una regla */
.trydan-lp .trydan-vs__list.is-mas{
  margin-top:clamp(.6rem,1vw,.9rem);
  padding-top:clamp(.6rem,1vw,.9rem);
  border-top:1px solid var(--t-accent);
}
.trydan-lp .trydan-vs__list.is-mas li{color:var(--t-ink);font-weight:500}
.trydan-lp .trydan-vs__list.is-mas li::before{
  content:"+";
  color:var(--t-accent);font-weight:700;
}

/* ── pie: nivel 2 y enlace interno ──────────────────────────────────── */
.trydan-lp .trydan-vs__pie{
  width:100%;max-width:1000px;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1rem,1.8vw,1.75rem);
}
.trydan-vs .trydan-link{margin:0}

/* ═══ 11 · CTA DE INSTALACION ═══════════════════════════════════════════
   La unica tarjeta con el naranja de fondo en toda la pagina: es la llamada
   principal y tiene que destacar sobre las demas sin competir con ellas. */
.trydan-instala{
  background:var(--t-bg);
  padding:clamp(2rem,5vw,4.5rem) var(--t-gutter);
}
.trydan-lp .trydan-instala__card{
  background:var(--t-accent);
  border-radius:clamp(1.25rem,1.9vw,1.75rem);
  padding:clamp(3rem,10.5vw,9rem) var(--t-gutter);
  text-align:center;
}
.trydan-instala__card>.wp-block-group__inner-container{
  max-width:52rem;margin-inline:auto;
}

/* sobre el naranja todo va en blanco */
.trydan-lp .trydan-instala__card .trydan-eyebrow{color:#fff}
.trydan-lp .trydan-instala__card .trydan-h2{
  margin:0;color:#fff;
}
.trydan-lp .trydan-instala__card .trydan-body{
  max-width:44rem;margin-inline:auto;
  color:rgba(255,255,255,.92);
}
.trydan-lp .trydan-instala__cta{margin:clamp(2rem,4vw,3.5rem) 0 0}

/* El boton invertido: blanco con letra naranja. El halo no puede ser naranja
   como el del boton principal —sobre naranja no se veria—, asi que es una
   sombra neutra que se abre hacia abajo al pasar por encima. */
.trydan-lp .trydan-btn-inv{
  display:inline-block;
  background:#fff;color:var(--t-accent-dark);
  border:0;border-radius:var(--t-r-btn);
  padding:.85rem 1.85rem;
  font-family:inherit;font-size:clamp(.875rem,.95vw,1rem);
  font-weight:600;letter-spacing:.01em;line-height:1.2;
  text-decoration:none;cursor:pointer;
  box-shadow:0 9px 20px -12px rgba(0,0,0,.22);
  transition:color .3s var(--t-ease),box-shadow .35s var(--t-ease);
}
.trydan-lp .trydan-btn-inv:hover,
.trydan-lp .trydan-btn-inv:focus,
.trydan-lp .trydan-btn-inv:focus-visible,
.trydan-lp .trydan-btn-inv:active{
  color:var(--t-accent);text-decoration:none;
  box-shadow:0 17px 34px -12px rgba(0,0,0,.30);
}
.trydan-lp .trydan-btn-inv:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── la ventana del instalador ──────────────────────────────────────────
   <dialog> nativo: el navegador ya pone la trampa de foco, Esc para cerrar,
   el fondo y el top-layer (que se salta el overflow-x:clip del html). */
.trydan-lp.trydan-modal{
  width:min(34rem,calc(100vw - 2 * var(--t-gutter)));
  max-width:none;max-height:calc(100dvh - 2 * var(--t-gutter));
  margin:auto;padding:0;border:0;
  background:transparent;color:var(--t-ink);
  overflow:visible;
}
.trydan-lp.trydan-modal::backdrop{
  background:rgba(46,46,42,.55);
  backdrop-filter:blur(3px);
}
.trydan-lp .trydan-modal__caja{
  position:relative;
  max-height:calc(100dvh - 2 * var(--t-gutter));
  overflow-y:auto;
  background:#fff;border-radius:var(--t-r-media);
  padding:clamp(1.75rem,3.4vw,3rem);
  text-align:left;
}
.trydan-lp .trydan-modal__x{
  position:absolute;top:.85rem;right:.85rem;
  display:grid;place-items:center;
  width:2.25rem;height:2.25rem;padding:0;
  background:transparent;border:0;border-radius:999px;
  color:var(--t-body);cursor:pointer;
  transition:background-color .25s var(--t-ease),color .25s var(--t-ease);
}
.trydan-lp .trydan-modal__x:hover,
.trydan-lp .trydan-modal__x:focus-visible{background:#F2F0ED;color:var(--t-ink)}
.trydan-lp .trydan-modal__h{
  margin:0;
  font-size:clamp(1.25rem,1.9vw,1.75rem);
  font-weight:300;line-height:1.2;letter-spacing:-.015em;
  color:var(--t-ink);text-wrap:balance;
}
.trydan-lp .trydan-modal__p{
  margin:clamp(.6rem,1vw,.9rem) 0 clamp(1.25rem,2vw,1.75rem);
  font-size:clamp(.9375rem,1vw,1.0625rem);
  line-height:1.55;color:var(--t-body);text-wrap:pretty;
}
.trydan-lp .trydan-modal .trydan-eyebrow{
  margin:0 0 .6rem;
  letter-spacing:.22em;text-indent:.11em;
  padding-right:2.5rem;          /* deja sitio a la X */
}

/* Los campos: el formulario es de Contact Form 7, asi que se le da estilo por
   tipo de input en vez de por clase, que es lo unico estable entre versiones. */
.trydan-lp .trydan-form p{margin:0 0 .7rem}
.trydan-lp .trydan-form input[type=text],
.trydan-lp .trydan-form input[type=tel],
.trydan-lp .trydan-form input[type=email],
.trydan-lp .trydan-form input[type=number]{
  width:100%;box-sizing:border-box;
  padding:.8rem 1rem;
  background:#FBFAF9;color:var(--t-ink);
  border:1px solid #E4E1DC;border-radius:var(--t-r-btn);
  font-family:inherit;font-size:1rem;line-height:1.4;   /* 16px: evita el zoom de iOS al enfocar */
  transition:border-color .25s var(--t-ease),background-color .25s var(--t-ease);
}
.trydan-lp .trydan-form input:focus{
  outline:0;border-color:var(--t-accent);background:#fff;
}
.trydan-lp .trydan-form input::placeholder{color:#9B9891;opacity:1}
.trydan-lp .trydan-form input[type=submit]{
  width:100%;margin-top:.5rem;
  padding:.9rem 1.85rem;
  background:var(--t-accent);color:#fff;
  border:0;border-radius:var(--t-r-btn);
  font-family:inherit;font-size:1rem;font-weight:600;
  cursor:pointer;
  box-shadow:0 9px 20px -12px rgba(238,127,27,.30);
  transition:background-color .3s var(--t-ease),box-shadow .35s var(--t-ease);
}
.trydan-lp .trydan-form input[type=submit]:hover,
.trydan-lp .trydan-form input[type=submit]:focus-visible{
  background:var(--t-accent-dark);
  box-shadow:0 17px 32px -12px rgba(238,127,27,.42);
}
/* el consentimiento: letra pequena y la casilla alineada con la primera linea */
.trydan-lp .trydan-form .wpcf7-acceptance .wpcf7-list-item{margin:0}
.trydan-lp .trydan-form .wpcf7-acceptance label{
  display:flex;align-items:flex-start;gap:.6em;
  font-size:.8125rem;line-height:1.5;color:var(--t-body);
}
.trydan-lp .trydan-form .wpcf7-acceptance input[type=checkbox]{
  flex:0 0 auto;margin-top:.15em;accent-color:var(--t-accent);
}
.trydan-lp .trydan-form .wpcf7-not-valid-tip{
  margin-top:.3rem;font-size:.8125rem;color:#C1392B;
}
.trydan-lp .trydan-form .wpcf7-response-output{
  margin:1rem 0 0;padding:.75rem 1rem;
  border-radius:var(--t-r-btn);border:1px solid currentColor;
  font-size:.875rem;line-height:1.5;
}

/* Entrada y salida de la ventana. @starting-style da el estado inicial y
   allow-discrete deja que display/overlay esperen a la transicion, asi que
   tambien se anima al cerrar. Donde no haya soporte, abre y cierra en seco. */
@media (prefers-reduced-motion:no-preference){
  .trydan-lp.trydan-modal{
    opacity:0;transform:translateY(14px) scale(.985);
    transition:opacity .3s var(--t-ease),transform .38s var(--t-ease),
               overlay .38s allow-discrete,display .38s allow-discrete;
  }
  .trydan-lp.trydan-modal[open]{opacity:1;transform:none}
  @starting-style{
    .trydan-lp.trydan-modal[open]{opacity:0;transform:translateY(14px) scale(.985)}
  }
  .trydan-lp.trydan-modal::backdrop{
    opacity:0;
    transition:opacity .3s var(--t-ease),
               overlay .3s allow-discrete,display .3s allow-discrete;
  }
  .trydan-lp.trydan-modal[open]::backdrop{opacity:1}
  @starting-style{
    .trydan-lp.trydan-modal[open]::backdrop{opacity:0}
  }
}

/* ── la ventana del control dinamico ──────────────────────
   Fondo claro y una SECUENCIA: tres partes numeradas, separadas por un
   filete y no por tarjetas. Cinco cajas iguales apiladas no dicen cual manda;
   un numero y una linea si.

   Dentro va el MISMO divisor de la seccion, no una copia: el bloque se movio
   aqui. Un solo componente y un solo estado.

   La entrada y la salida van con @starting-style y allow-discrete, igual que
   la ventana del instalador. Donde no haya soporte, abre y cierra en seco. */
.trydan-lp.trydan-pot{
  /* Todos los colores de la ventana se nombran AQUI y lo de dentro los
     hereda —el divisor, sus cifras, las fichas— sin tocar ni una de sus
     reglas. Si hace falta un gris nuevo, se anade y se nombra; no se
     improvisa en la regla que lo necesita. */
  --t-ink:#2E2E2A;
  --t-body:#63615C;
  --t-tenue:#6F6D67;                  /* 5,1:1 sobre blanco: vale para rotulos de 12 px */
  --t-linea:#E9E7E2;
  --t-sup:#F5F4F2;
  --t-relleno:#F0EEEA;
  --t-hover:#B9B6B0;
  --t-panel:#FFFFFF;
  --t-vidrio:rgba(14,14,12,.66);      /* el cristal sobre las fotos */
  --t-vidrio-solido:#242421;          /* lo mismo cuando va debajo de la foto, en movil */
  --t-acc-suave:rgba(238,127,27,.1);
  --t-sobre-acc:#1B1B18;              /* tinta sobre el naranja: 6,3:1 */
  /* El naranja del TEXTO: vivo, no marron. Es el de marca un punto mas hondo
     porque el exacto (#EE7F1B) da 2,7:1 sobre blanco y no llega ni a los 3:1
     de una cifra grande; este da 3,2:1. Decision de diseno: vale para las
     cifras grandes, pero NO cumple AA (4,5:1) en un rotulo de 12 px. Si una
     auditoria lo reclama, este es el unico sitio que hay que tocar. */
  --t-accent-dark:#E56F00;

  /* Siete papeles de tamano, no 23 medidas sueltas. Base rem+vw y no vw
     puro: con vw puro la pendiente no se aplana y el salto entre movil y
     escritorio se dispara. El suelo son 12 px; por debajo no se lee. */
  --t-fs-h2:clamp(1.625rem,1rem + 1.6vw,2.5rem);
  --t-fs-h3:clamp(1.25rem,.9rem + .75vw,1.625rem);
  --t-fs-p:clamp(1rem,.875rem + .3vw,1.1875rem);
  --t-fs-sec:clamp(.875rem,.8rem + .18vw,1rem);
  --t-fs-cifra:clamp(.9375rem,.8rem + .45vw,1.25rem);
  --t-fs-num:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);
  --t-fs-rot:clamp(.75rem,.72rem + .05vw,.8125rem);
}
.trydan-lp.trydan-pot{
  /* El SCROLLER es el dialogo entero, no una caja de dentro. Asi la barra sale
     en el borde de la ventana y se lee como la normal de la pagina, en vez de
     una segunda barra interior. */
  position:fixed;inset:0;
  width:100%;max-width:none;height:100%;max-height:none;
  margin:0;padding:0;border:0;
  background:transparent;color:var(--t-ink);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
}
.trydan-lp.trydan-pot::backdrop{
  /* velo claro del color de la pagina, no oscuro */
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
/* Centra el panel cuando cabe y lo deja crecer cuando no: min-height, no height. */
.trydan-lp .trydan-pot__centro{
  display:flex;align-items:center;
  min-height:100%;
  padding:var(--t-gutter);
  /* El hueco de alrededor tiene que dejar pasar el click al <dialog>, que es
     quien cierra al pulsar fuera. Lo de dentro lo devuelve a auto. */
  pointer-events:none;
}
.trydan-lp .trydan-pot__panel{
  display:flex;flex-direction:column;
  /* Al menos el 75 % del ancho de la ventana, y nunca por debajo de 60 rem. */
  width:min(100%,max(75vw,60rem));margin-inline:auto;
  pointer-events:none;
}
/* La X: envoltorio de ALTURA CERO, pegado arriba y puesto primero en el orden.
   Al no medir nada no empuja el contenido, y al ser sticky no se va con el
   scroll. */
.trydan-lp .trydan-pot__xw{
  order:1;align-self:flex-end;
  position:sticky;top:0;height:0;z-index:3;
  margin-inline-end:1.25rem;
  pointer-events:auto;
}
.trydan-lp .trydan-pot__x{
  display:grid;place-items:center;
  width:2.75rem;height:2.75rem;padding:0;margin-top:1.25rem;
  background:var(--t-sup);
  border:0;border-radius:999px;
  color:var(--t-ink);cursor:pointer;
  transition:background-color .25s var(--t-ease);
}
.trydan-lp .trydan-pot__x:hover,
.trydan-lp .trydan-pot__x:focus-visible{background:var(--t-relleno)}
.trydan-lp .trydan-pot__x:focus-visible{outline:2px solid var(--t-ink);outline-offset:2px}

.trydan-lp .trydan-pot__caja{
  order:2;
  background:var(--t-panel);color:var(--t-ink);
  border-radius:var(--t-r-media);
  --t-pad:clamp(1.5rem,3.6vw,4.5rem);
  padding:0;
  text-align:left;
  pointer-events:auto;
  box-shadow:0 30px 80px -24px rgba(46,46,42,.28),0 0 0 1px rgba(46,46,42,.06);
}
/* NIVEL 1 · la cabecera del pop-up: una banda propia, con fondo, mas grande
   que cualquier titulo de dentro. Las secciones son blancas y van debajo. */
.trydan-lp .trydan-pot__cab{
  padding:clamp(2rem,4vw,4rem) var(--t-pad);
  background:var(--t-sup);
  border-radius:var(--t-r-media) var(--t-r-media) 0 0;
}
.trydan-lp .trydan-pot__rotulo{
  margin:0 0 .7rem;
  padding-right:3.25rem;                       /* deja sitio a la X */
  font-size:var(--t-fs-rot);
  font-weight:600;line-height:1.35;
  letter-spacing:.22em;text-indent:.11em;text-transform:uppercase;
  color:var(--t-accent-dark);
}
.trydan-lp .trydan-pot__h{
  margin:0;
  font-size:var(--t-fs-h2);
  font-weight:300;line-height:1.14;letter-spacing:-.02em;
  color:var(--t-ink);text-wrap:balance;max-width:22ch;
}

/* ── la secuencia ───────────────────────────────────── */
/* NIVEL 2 · las secciones: blancas, con aire propio y una linea a sangre. */
.trydan-lp .trydan-pot__sec{margin:0;padding:clamp(2.25rem,4.4vw,4rem) var(--t-pad)}
.trydan-lp .trydan-pot__sec+.trydan-pot__sec{border-top:1px solid var(--t-linea)}
.trydan-lp .trydan-pot__n{
  display:inline-block;margin:0 0 1rem;
  padding:.4em 1em;border-radius:999px;
  background:var(--t-relleno);
  font-size:var(--t-fs-rot);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-ink);font-variant-numeric:tabular-nums;
}
/* los tres titulos de seccion, iguales */
.trydan-lp .trydan-dia__h3,
.trydan-lp .trydan-cb__h,
.trydan-lp .trydan-sol__h{
  margin:0 0 .5rem;
  font-size:var(--t-fs-h3);
  font-weight:400;line-height:1.25;letter-spacing:-.015em;
  color:var(--t-ink);text-wrap:balance;
}
.trydan-lp .trydan-dia__p,
.trydan-lp .trydan-cb__p,
.trydan-lp .trydan-sol__p{
  margin:0;max-width:62ch;
  font-size:var(--t-fs-p);
  line-height:1.6;color:var(--t-body);text-wrap:pretty;
}
.trydan-lp .trydan-cb__p strong{color:var(--t-ink);font-weight:600}

/* ── 02 · el dia ─────────────────────────────────────── */
.trydan-lp .trydan-dia__escena{
  position:relative;margin:clamp(1rem,2vw,1.5rem) 0 0;
  aspect-ratio:1672 / 941;max-width:100%;
  border-radius:var(--t-r-media);overflow:hidden;background:var(--t-relleno);
}
.trydan-lp .trydan-dia__escena img{display:block;width:100%;height:100%;object-fit:cover}

/* Lo que va SOBRE la foto es cristal esmerilado BLANCO: los tokens de texto
   son los normales de la ventana (tinta sobre claro) y solo cambian el cristal,
   las lineas y el relleno de las cajas, que aqui son translucidos. */
.trydan-lp .trydan-dia__vivo,
.trydan-lp .trydan-dia__cambio,
.trydan-lp .trydan-dia__pie,
.trydan-lp .trydan-sol__vivo{
  --t-vidrio:rgba(255,255,255,.8);
  --t-vidrio-solido:#FFFFFF;
  --t-linea:rgba(46,46,42,.14);
  --t-relleno:rgba(46,46,42,.06);
  --t-cristal-borde:rgba(255,255,255,.7);
  --t-cristal-sombra:0 10px 30px -10px rgba(46,46,42,.35);
}
.trydan-lp .trydan-dia__vivo,
.trydan-lp .trydan-dia__cambio,
.trydan-lp .trydan-dia__hud,
.trydan-lp .trydan-sol__vivo{
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--t-cristal-borde);
  box-shadow:var(--t-cristal-sombra);
}

/* ── arriba: lo que pasa ahora ─────────────────────────── */
.trydan-lp .trydan-dia__vivo{
  position:absolute;top:clamp(.5rem,1.5vw,1.1rem);left:clamp(.5rem,1.5vw,1.1rem);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(.5rem,1.4vw,1.15rem);
  padding:clamp(.45rem,1vw,.7rem) clamp(.7rem,1.5vw,1.1rem);
  background:var(--t-vidrio);
  border-radius:16px;color:var(--t-ink);
  pointer-events:none;
}
.trydan-lp .trydan-dia__hora{
  display:flex;align-items:center;gap:.45em;
  padding-right:clamp(.5rem,1.4vw,1.15rem);
  border-right:1px solid var(--t-linea);
  font-size:var(--t-fs-cifra);font-weight:600;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.trydan-lp .trydan-dia__punto-vivo{
  width:.45em;height:.45em;border-radius:999px;background:var(--t-accent);flex:none;
}
@media (prefers-reduced-motion:no-preference){
  .trydan-lp .trydan-dia__punto-vivo{animation:trydan-vivo 2.2s ease-in-out infinite}
}
@keyframes trydan-vivo{0%,100%{opacity:.45}50%{opacity:1}}
.trydan-lp .trydan-dia__dato{display:flex;flex-direction:column;gap:.05rem}
.trydan-lp .trydan-dia__dk{
  font-size:var(--t-fs-rot);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t-tenue);
}
.trydan-lp .trydan-dia__dv{
  font-size:var(--t-fs-cifra);font-weight:600;
  line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.trydan-lp .trydan-dia__dv small{
  font-size:var(--t-fs-rot);font-weight:600;margin-left:.2em;color:var(--t-tenue);
}
.trydan-lp .trydan-dia__dato.es-coche .trydan-dia__dv{color:var(--t-accent-dark)}
/* Cuando la casa se lo come todo, el coche espera: no es un fallo, es el
   producto haciendo su trabajo. Va en gris, no en rojo. */
.trydan-lp .trydan-dia__dato.es-coche.es-parado .trydan-dia__dv{color:var(--t-tenue)}

/* ── al pie: el dia entero ───────────────────────────── */
/* La frase del proximo cambio y el panel del dia van juntos, en una sola
   columna: la frase habla del plan, asi que pegada a el se lee como su pie. */
.trydan-lp .trydan-dia__pie{
  position:absolute;left:clamp(.5rem,1.5vw,1.1rem);right:clamp(.5rem,1.5vw,1.1rem);
  bottom:clamp(.5rem,1.2vw,.9rem);
  display:flex;flex-direction:column;
  pointer-events:none;
}
.trydan-lp .trydan-dia__hud{
  width:100%;
  padding:clamp(.5rem,1.1vw,.8rem) clamp(.7rem,1.5vw,1.15rem);
  pointer-events:auto;
  background:var(--t-vidrio);
  border-radius:20px;color:var(--t-ink);
  --t-hueco:clamp(.25rem,.6vw,.5rem);
}
/* Los bloques y los tramos comparten reparto y hueco: el mismo --n, que son
   las HORAS del tramo. Asi cada caja cae justo sobre su tramo. */
.trydan-lp .trydan-dia__bloques,
.trydan-lp .trydan-dia__tramos{display:flex;gap:var(--t-hueco)}
.trydan-lp .trydan-dia__bloque{
  position:relative;overflow:hidden;
  flex:var(--n) 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:clamp(.35rem,.85vw,.6rem) clamp(.2rem,.5vw,.5rem);
  background:var(--t-relleno);border-radius:var(--t-r-btn);
  transition:opacity .3s var(--t-ease),box-shadow .3s var(--t-ease);
}
/* El relleno crece dentro del tramo en curso: ata la caja al reloj sin
   necesitar una segunda barra. */
.trydan-lp .trydan-dia__avance{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:rgba(238,127,27,.2);
  transition:width .12s linear;
}
.trydan-lp .trydan-dia__rango,
.trydan-lp .trydan-dia__pmax{position:relative;z-index:1}
.trydan-lp .trydan-dia__rango{
  font-size:var(--t-fs-rot);font-weight:500;
  color:var(--t-tenue);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.trydan-lp .trydan-dia__pmax{
  display:flex;flex-direction:column;align-items:center;
  font-size:var(--t-fs-rot);font-weight:500;
  color:var(--t-tenue);white-space:nowrap;line-height:1.25;text-align:center;
}
.trydan-lp .trydan-dia__pmax small{
  font-size:var(--t-fs-rot);font-weight:600;color:var(--t-tenue);margin-left:.15em;
}
.trydan-lp .trydan-dia__pmax b{
  display:block;
  font-size:var(--t-fs-cifra);font-weight:600;
  letter-spacing:-.015em;color:var(--t-ink);font-variant-numeric:tabular-nums;
}
/* pasado apagado, el que corre con contorno y relleno, el que falta entero */
.trydan-lp .trydan-dia__bloque.es-pasado{opacity:.45}
.trydan-lp .trydan-dia__bloque.es-ahora{opacity:1;background:#fff;box-shadow:inset 0 0 0 1.5px var(--t-ink)}

.trydan-lp .trydan-dia__pista{position:relative;margin:clamp(.5rem,1vw,.75rem) 0 0}
.trydan-lp .trydan-dia__tramos{height:clamp(.3rem,.55vw,.45rem)}
.trydan-lp .trydan-dia__tramo{
  flex:var(--n) 1 0;min-width:0;
  border-radius:999px;background:var(--t-linea);
  transition:background-color .3s var(--t-ease);
}
.trydan-lp .trydan-dia__tramo.es-ahora{background:var(--t-accent)}
.trydan-lp .trydan-dia__cabezal{
  position:absolute;left:var(--t,0%);top:-6px;height:calc(100% + 12px);
  width:0;border-left:2px solid var(--t-ink);pointer-events:none;
}
.trydan-lp .trydan-dia__cabezal::after{
  content:"";position:absolute;left:-4px;top:-4px;
  width:7px;height:7px;border-radius:999px;background:var(--t-ink);
}
.trydan-lp .trydan-dia__scrub{
  position:absolute;left:0;right:0;top:-.75rem;height:calc(100% + 1.5rem);
  width:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;z-index:3;
}
.trydan-lp .trydan-dia__scrub::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px}
.trydan-lp .trydan-dia__scrub::-moz-range-thumb{width:40px;height:40px;border:0;background:transparent}
.trydan-lp .trydan-dia__hud:has(.trydan-dia__scrub:focus-visible){
  outline:2px solid var(--t-ink);outline-offset:3px;border-radius:var(--t-r-media);
}

/* La frase va arriba a la derecha, en el cielo, que esta vacio. Abajo tapaba
   el coche, que es justo lo que la foto tiene que ensenar. */
.trydan-lp .trydan-dia__cambio{
  position:absolute;top:clamp(.5rem,1.5vw,1.1rem);right:clamp(.5rem,1.5vw,1.1rem);
  display:flex;align-items:flex-start;gap:.5rem;
  max-width:min(24rem,46%);margin:0;
  padding:clamp(.45rem,1vw,.7rem) clamp(.7rem,1.5vw,1.1rem);
  background:var(--t-vidrio);
  border-radius:16px;
  font-size:var(--t-fs-sec);line-height:1.4;
  color:var(--t-body);text-wrap:pretty;
  pointer-events:none;
}
.trydan-lp .trydan-dia__cambio b{color:var(--t-ink);font-weight:600;font-variant-numeric:tabular-nums}
.trydan-lp .trydan-dia__cambio svg{flex:none;opacity:.6;margin-top:.22em}

/* Con menos ancho el tramo de 3 h mide una brizna. Antes que romper la
   alineacion se cae el rango de dentro de la caja: el orden de los bloques y
   la barra de debajo ya dicen donde esta cada uno. */
@media(max-width:64rem){
  .trydan-lp .trydan-dia__rango{display:none}
}
@media(max-width:34rem){
  .trydan-lp .trydan-dia__pmax>span,
  .trydan-lp .trydan-dia__pmax small{display:none}
  .trydan-lp .trydan-dia__bloque{padding-inline:.1rem}
  .trydan-lp .trydan-dia__vivo{gap:.35rem .5rem;padding-inline:.7rem}
  .trydan-lp .trydan-dia__hora{padding-right:.5rem}
}
/* En movil la foto es pequena y todo lo que se le pone encima la tapa. Aqui
   el panel y la frase bajan DEBAJO de la imagen, en una columna, sobre un
   fondo solido. Solo la caja del instante se queda encima, arriba. */
@media(max-width:47.999rem){
  .trydan-lp .trydan-dia__escena{
    aspect-ratio:auto;overflow:visible;background:none;border-radius:0;
    display:flex;flex-direction:column;gap:.5rem;
  }
  .trydan-lp .trydan-dia__escena img{
    height:auto;aspect-ratio:1672 / 941;border-radius:var(--t-r-media);
    background:var(--t-relleno);
  }
  .trydan-lp .trydan-dia__vivo,
  .trydan-lp .trydan-dia__pie,
  .trydan-lp .trydan-dia__cambio{position:static;max-width:none}
  .trydan-lp .trydan-dia__vivo{order:1;pointer-events:auto}
  .trydan-lp .trydan-dia__pie{order:2}
  .trydan-lp .trydan-dia__cambio{order:3}
  .trydan-lp .trydan-dia__vivo,
  .trydan-lp .trydan-dia__hud,
  .trydan-lp .trydan-dia__cambio{background:var(--t-vidrio-solido)}
}
@media (prefers-reduced-motion:reduce){
  .trydan-lp .trydan-dia__bloque,
  .trydan-lp .trydan-dia__tramo,
  .trydan-lp .trydan-dia__avance{transition:none}
}

/* ── 03 · el equipo ──────────────────────────────────── */
/* Foto de producto REAL. La version clara, con su superficie texturizada,
   aguanta sobre blanco; la otra va negra sobre negro y solo vale sobre oscuro.
   En un marco con radio, sin mascara ni resplandor. */
.trydan-lp .trydan-cb__foto{
  margin:clamp(1.25rem,2.6vw,2rem) 0 0;
  border-radius:var(--t-r-media);overflow:hidden;background:var(--t-relleno);
}
.trydan-lp .trydan-cb__foto img{
  display:block;width:100%;height:auto;
  aspect-ratio:21 / 9;object-fit:cover;object-position:50% 55%;
}
/* Tres pasos con filete, en columna en estrecho y en fila en ancho. Una
   lista ordenada de verdad: es una secuencia y el marcado lo dice. */
.trydan-lp .trydan-cb__pasos{
  list-style:none;margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;
  gap:clamp(1rem,2vw,1.5rem);
}
@media(min-width:48rem){
  .trydan-lp .trydan-cb__pasos{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(1.5rem,3vw,2.75rem);
  }
}
.trydan-lp .trydan-cb__paso{
  display:flex;flex-direction:column;gap:.25rem;
  padding-top:.9rem;border-top:2px solid var(--t-ink);
}
.trydan-lp .trydan-cb__verbo{
  font-size:var(--t-fs-p);font-weight:600;color:var(--t-ink);
}
.trydan-lp .trydan-cb__que{
  font-size:var(--t-fs-sec);
  line-height:1.5;color:var(--t-body);text-wrap:pretty;
}

.trydan-lp .trydan-pot__incluido{
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;
  margin:clamp(1.75rem,3vw,2.5rem) 0 0;
  padding:clamp(.9rem,1.6vw,1.25rem) clamp(1rem,2vw,1.5rem);
  border:1px solid var(--t-accent);border-radius:var(--t-r-btn);
  background:var(--t-acc-suave);
  font-size:var(--t-fs-p);line-height:1.5;color:var(--t-ink);
}
.trydan-lp .trydan-pot__sello{
  flex:none;
  padding:.3em .75em;border-radius:999px;
  background:var(--t-accent);color:var(--t-sobre-acc);
  font-size:var(--t-fs-rot);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.trydan-lp .trydan-pot__nota{
  margin:clamp(1rem,1.8vw,1.35rem) 0 0;max-width:62ch;
  font-size:var(--t-fs-sec);line-height:1.55;color:var(--t-tenue);
}

/* ═══ POP-UP · CARGA FOTOVOLTAICA ═══════════════════════════════════════
   Mismo sistema que el del control de potencia: cabecera con fondo, secciones
   numeradas y UN objeto con fondo por bloque. Aqui solo estan las piezas
   propias; la ventana, la cabecera y los titulos vienen de trydan-pot. */
.trydan-lp .trydan-pot__lead{
  margin:clamp(.9rem,1.6vw,1.25rem) 0 0;max-width:48ch;
  font-size:var(--t-fs-p);line-height:1.6;color:var(--t-body);text-wrap:pretty;
}
.trydan-lp .trydan-sol__p--pie{margin-top:clamp(1rem,2vw,1.5rem);font-size:var(--t-fs-sec);color:var(--t-tenue)}

/* la foto con el instante encima, en cristal blanco como la del dia */
.trydan-lp .trydan-sol__escena{
  position:relative;margin:clamp(1.25rem,2.4vw,2rem) 0 0;
  aspect-ratio:3 / 2;overflow:hidden;
  border-radius:var(--t-r-media);background:var(--t-relleno);
}
.trydan-lp .trydan-sol__escena img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.trydan-lp .trydan-sol__vivo{
  position:absolute;left:clamp(.5rem,1.4vw,1.1rem);right:clamp(.5rem,1.4vw,1.1rem);bottom:clamp(.5rem,1.4vw,1.1rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(.75rem,1.6vw,1.25rem) clamp(1rem,2.2vw,1.9rem);
  background:var(--t-vidrio);border-radius:20px;color:var(--t-ink);
}
.trydan-lp .trydan-sol__prod{display:flex;flex-direction:column;gap:.2rem}
.trydan-lp .trydan-sol__pk{
  font-size:var(--t-fs-rot);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-tenue);
}
.trydan-lp .trydan-sol__pv{
  font-size:var(--t-fs-num);font-weight:300;line-height:1;letter-spacing:-.02em;
  color:var(--t-ink);font-variant-numeric:tabular-nums;
}
.trydan-lp .trydan-sol__pv small{font-size:var(--t-fs-cifra);font-weight:400;color:var(--t-tenue);margin-left:.25em;letter-spacing:0}
.trydan-lp .trydan-sol__ps{display:flex;align-items:center;gap:.5em;font-size:var(--t-fs-sec);color:var(--t-body)}
.trydan-lp .trydan-sol__filas{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.5rem,1vw,.8rem)}
.trydan-lp .trydan-sol__fila{
  display:grid;grid-template-columns:minmax(3.25rem,4.5rem) minmax(0,1fr) auto;align-items:center;
  gap:clamp(.6rem,1.4vw,1rem);
}
.trydan-lp .trydan-sol__fk{font-size:var(--t-fs-rot);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-tenue)}
.trydan-lp .trydan-sol__pista{height:.5rem;border-radius:999px;background:var(--t-linea);overflow:hidden}
.trydan-lp .trydan-sol__pista i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--t-body)}
.trydan-lp .trydan-sol__fila.es-coche .trydan-sol__pista i{background:var(--t-accent)}
.trydan-lp .trydan-sol__fv{
  font-size:var(--t-fs-cifra);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.trydan-lp .trydan-sol__fv small{font-size:var(--t-fs-rot);font-weight:600;margin-left:.25em;color:var(--t-tenue)}
.trydan-lp .trydan-sol__fila.es-coche .trydan-sol__fv{color:var(--t-accent-dark)}

/* dos columnas, centradas entre si en vertical */
.trydan-lp .trydan-sol__duo{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(1.5rem,3vw,2.5rem);
}
@media(min-width:64rem){
  .trydan-lp .trydan-sol__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
  .trydan-lp .trydan-sol__duo--iguales{align-items:stretch}
}
.trydan-lp .trydan-sol__reglas{list-style:none;margin:0;padding:0}
.trydan-lp .trydan-sol__regla{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--t-linea);
}
.trydan-lp .trydan-sol__regla:first-child{border-top:0;padding-top:0}
.trydan-lp .trydan-sol__regla:last-child{padding-bottom:0}
.trydan-lp .trydan-sol__regla p{margin:0;font-size:var(--t-fs-p);line-height:1.5;color:var(--t-body);text-wrap:pretty}
.trydan-lp .trydan-sol__ico{
  flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border-radius:999px;background:var(--t-relleno);color:var(--t-ink);
}
.trydan-lp .trydan-sol__ico.es-coche{background:var(--t-acc-suave);color:var(--t-accent-dark)}

/* tarjeta de la bateria: un objeto, como el grafico del reparto */
.trydan-lp .trydan-sol__bat,
.trydan-lp .trydan-sol__tarjeta{
  padding:clamp(1.25rem,2.6vw,2rem);background:var(--t-sup);border-radius:var(--t-r-media);
}
.trydan-lp .trydan-sol__bat-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem}
.trydan-lp .trydan-sol__bat-h{
  margin:0;font-size:var(--t-fs-h3);font-weight:400;line-height:1.25;letter-spacing:-.015em;color:var(--t-ink);
}
.trydan-lp .trydan-sol__bat-p{margin:.9rem 0 0;font-size:var(--t-fs-sec);line-height:1.6;color:var(--t-body);text-wrap:pretty}
.trydan-lp .trydan-sol__bat-p b{color:var(--t-ink);font-weight:600;font-variant-numeric:tabular-nums}
.trydan-lp .trydan-sol__bat-k,
.trydan-lp .trydan-sol__ck{
  margin:1.25rem 0 .75rem;font-size:var(--t-fs-rot);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t-tenue);
}
.trydan-lp .trydan-sol__ck{margin-top:0;line-height:1.4}
.trydan-lp .trydan-sol__bat .trydan-kw__f{background:var(--t-panel)}
.trydan-lp .trydan-sol__bat .trydan-kw__r:checked+.trydan-kw__f{background:var(--t-ink)}

/* 02 · los tramos: la franja los dibuja, la lista los nombra */
.trydan-lp .trydan-sol__franja{display:flex;gap:4px;height:.75rem;margin-bottom:1rem}
.trydan-lp .trydan-sol__franja span{flex:var(--n) 1 0;border-radius:999px}
.trydan-lp .trydan-sol__franja .es-red,.trydan-lp .trydan-sol__modo.es-red::before{background:var(--t-hover)}
.trydan-lp .trydan-sol__franja .es-sol,.trydan-lp .trydan-sol__modo.es-sol::before{background:var(--t-accent)}
.trydan-lp .trydan-sol__franja .es-mix,.trydan-lp .trydan-sol__modo.es-mix::before{
  background:repeating-linear-gradient(135deg,var(--t-accent) 0 4px,var(--t-hover) 4px 8px);
}
.trydan-lp .trydan-sol__tramos{list-style:none;margin:0;padding:0}
.trydan-lp .trydan-sol__tramos li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;
  padding:.8rem 0;border-top:1px solid var(--t-hover);
}
.trydan-lp .trydan-sol__hora{font-size:var(--t-fs-sec);color:var(--t-tenue);font-variant-numeric:tabular-nums}
.trydan-lp .trydan-sol__modo{display:inline-flex;align-items:center;gap:.6em;font-size:var(--t-fs-sec);font-weight:600;color:var(--t-ink)}
.trydan-lp .trydan-sol__modo::before{content:"";flex:none;width:.75rem;height:.75rem;border-radius:999px}

/* el flujo: paneles arriba, casa y coche debajo, y un hilo de puntos que baja */
.trydan-lp .trydan-sol__flujo{display:flex;flex-direction:column}
.trydan-lp .trydan-sol__par{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.trydan-lp .trydan-sol__nodo{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.1rem .75rem;
  padding:.85rem 1.1rem;background:var(--t-panel);border-radius:16px;
}
.trydan-lp .trydan-sol__nk{font-size:var(--t-fs-rot);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-tenue)}
.trydan-lp .trydan-sol__nodo b{font-size:var(--t-fs-cifra);font-weight:600;font-variant-numeric:tabular-nums;color:var(--t-ink)}
.trydan-lp .trydan-sol__nodo b small{font-size:var(--t-fs-rot);font-weight:600;margin-left:.25em;color:var(--t-tenue)}
.trydan-lp .trydan-sol__nodo.es-coche b{color:var(--t-accent-dark)}
.trydan-lp .trydan-sol__hilos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;height:2.25rem}
.trydan-lp .trydan-sol__hilos span{
  justify-self:center;width:2px;height:100%;
  background:repeating-linear-gradient(to bottom,var(--t-accent) 0 6px,transparent 6px 12px);
  background-size:2px 12px;
}
@media(prefers-reduced-motion:no-preference){
  .trydan-lp .trydan-sol__hilos span{animation:trydan-fluir 1s linear infinite}
}
@keyframes trydan-fluir{to{background-position:0 12px}}
.trydan-lp .trydan-sol__red{
  display:flex;align-items:center;gap:.6em;margin:1rem 0 0;
  font-size:var(--t-fs-sec);color:var(--t-tenue);
}
.trydan-lp .trydan-sol__red span{flex:none;width:.6rem;height:.6rem;border-radius:999px;background:var(--t-hover)}

/* 03 · las marcas */
.trydan-lp .trydan-sol__marcas{
  list-style:none;margin:clamp(1.25rem,2.4vw,1.75rem) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;
}
.trydan-lp .trydan-sol__marcas li{
  padding:.55em 1.1em;border-radius:999px;background:var(--t-relleno);
  font-size:var(--t-fs-sec);font-weight:500;color:var(--t-ink);
}

/* movil: la foto arriba y el instante debajo, en cristal solido */
@media(max-width:47.999rem){
  .trydan-lp .trydan-sol__escena{aspect-ratio:auto;overflow:visible;background:none;border-radius:0;display:flex;flex-direction:column;gap:.5rem}
  .trydan-lp .trydan-sol__escena img{height:auto;aspect-ratio:16 / 10;border-radius:var(--t-r-media)}
  .trydan-lp .trydan-sol__vivo{position:static;grid-template-columns:minmax(0,1fr);background:var(--t-vidrio-solido)}
  .trydan-lp .trydan-sol__par{grid-template-columns:1fr;margin-top:.6rem}
  .trydan-lp .trydan-sol__hilos{display:none}
}

/* Con una ventana abierta, el fondo no debe scrollear. El eje x sigue en
   clip, que es lo que impide que las secciones a sangre desborden. */
html:has(dialog[open]){overflow-y:hidden}

/* El desplazamiento va en la CAJA, no en el dialogo: el dialogo es el
   contenedor de scroll, y un transform ahi le crearia un bloque contenedor a
   todo lo fijo y lo pegajoso de dentro. La opacidad si puede ir en el dialogo.
   @starting-style da el estado de partida —que hace falta tambien en la caja,
   porque viene de display:none— y allow-discrete deja que display y overlay
   esperen a la transicion, asi que tambien se anima al cerrar. */
@media (prefers-reduced-motion:no-preference){
  .trydan-lp.trydan-pot{
    opacity:0;
    transition:opacity .3s var(--t-ease),
               overlay .42s allow-discrete,display .42s allow-discrete;
  }
  .trydan-lp.trydan-pot[open]{opacity:1}
  @starting-style{
    .trydan-lp.trydan-pot[open]{opacity:0}
  }
  .trydan-lp .trydan-pot__caja{
    transform:translateY(18px) scale(.985);
    transition:transform .42s var(--t-ease);
  }
  .trydan-lp.trydan-pot[open] .trydan-pot__caja{transform:none}
  @starting-style{
    .trydan-lp.trydan-pot[open] .trydan-pot__caja{transform:translateY(18px) scale(.985)}
  }
  .trydan-lp.trydan-pot::backdrop{
    opacity:0;
    transition:opacity .3s var(--t-ease),
               overlay .3s allow-discrete,display .3s allow-discrete;
  }
  .trydan-lp.trydan-pot[open]::backdrop{opacity:1}
  @starting-style{
    .trydan-lp.trydan-pot[open]::backdrop{opacity:0}
  }
}

/* ═══ 12 · DATOS TECNICOS ═══════════════════════════════════════════════
   La ficha completa. Cuatro cifras de cabecera y cuatro columnas de pares
   etiqueta/valor.

   Va en <dl>: es el elemento que existe para esto y le da al lector de
   pantalla la relacion entre el nombre del dato y su valor, que una tabla
   de divs no da. Cada par se envuelve en un div —valido en HTML5 dentro de
   <dl>— para poder animar la raya de cada fila con :nth-child. */
.trydan-tec{
  background:#fff;
  padding:clamp(3rem,7vw,8.5rem) var(--t-gutter-sec);
}
.trydan-tec__caja{max-width:1400px;margin-inline:auto}
.trydan-tec__head{text-align:center}
.trydan-lp .trydan-tec__head .trydan-h2{margin:0}

/* Reveal para contenedores que NO son bloques de Gutenberg: los de wp:html no
   tienen .wp-block-group__inner-container, asi que la regla normal no les vale. */
.trydan-anim--plano>*{
  opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--t-ease),transform .75s var(--t-ease);
}
.trydan-anim--plano.is-in>*{opacity:1;transform:none}
.trydan-anim--plano.is-in>*:nth-child(1){transition-delay:0ms}
.trydan-anim--plano.is-in>*:nth-child(2){transition-delay:90ms}
.trydan-anim--plano.is-in>*:nth-child(3){transition-delay:180ms}
.trydan-anim--plano.is-in>*:nth-child(4){transition-delay:270ms}

/* ── las cuatro cifras de cabecera ─────────────────────────────────────
   Sin cajas, con rayas finas entre columnas. El diseno de la pagina es
   editorial y una fila de tarjetas negras competiria con la tarjeta naranja
   que va justo encima; asi la cifra manda sola. */
.trydan-tec__destacados{
  display:grid;grid-template-columns:repeat(2,1fr);
  margin:clamp(2.25rem,4.5vw,4rem) 0 0;
  border-top:1px solid var(--t-linea);
}
@media(min-width:48rem){
  .trydan-tec__destacados{grid-template-columns:repeat(4,1fr)}
}
.trydan-lp .trydan-tec__d{
  padding:clamp(1.25rem,2.4vw,2.25rem) clamp(.5rem,1.4vw,1.5rem);
  border-bottom:1px solid var(--t-linea);
  text-align:center;
}
@media(min-width:48rem){
  .trydan-lp .trydan-tec__d + .trydan-tec__d{border-left:1px solid var(--t-linea)}
}
@media(max-width:47.999rem){
  .trydan-lp .trydan-tec__d:nth-child(2n){border-left:1px solid var(--t-linea)}
}
.trydan-lp .trydan-tec__n{
  margin:0;
  font-size:clamp(1.125rem,1.85vw,2.25rem);
  font-weight:500;line-height:1.15;letter-spacing:-.02em;
  color:var(--t-ink);
  font-variant-numeric:tabular-nums;
  text-wrap:balance;
}
/* la unidad pesa menos que la cifra: manda el numero */
.trydan-lp .trydan-tec__u{font-weight:400;color:var(--t-body)}
.trydan-lp .trydan-tec__sep{color:var(--t-accent);padding:0 .1em}
.trydan-lp .trydan-tec__k{
  margin:.55em 0 0;
  font-size:clamp(.75rem,.68vw,.8125rem);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-body);
}

/* ── las cuatro columnas de datos ──────────────────────────────────── */
.trydan-tec__grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.25rem,3.5vw,3.5rem) clamp(1.5rem,3vw,3.5rem);
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
@media(min-width:36rem){ .trydan-tec__grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:64rem){ .trydan-tec__grid{grid-template-columns:repeat(4,1fr)} }

/* el titulo de grupo, con su raya naranja encima */
.trydan-lp .trydan-tec__t{
  margin:0 0 clamp(.5rem,.8vw,.75rem);
  padding-top:clamp(.7rem,1.1vw,1rem);
  border-top:2px solid var(--t-accent);
  font-size:clamp(.75rem,.72vw,.8125rem);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-ink);line-height:1.35;
}
.trydan-lp .trydan-tec__dl{margin:0}

/* Cada fila lleva su raya en ::after para poder dibujarla de izquierda a
   derecha al entrar. El retardo va en --d por fila, asi la onda baja por la
   columna; el color del hover no lo hereda porque el delay solo afecta a
   transform. */
.trydan-lp .trydan-tec__fila{
  position:relative;
  padding:clamp(.6rem,1vw,.9rem) 0;
}
.trydan-lp .trydan-tec__fila::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--t-linea);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s var(--t-ease) var(--d,0s),
             background-color .28s var(--t-ease);
}
.trydan-tec__grid.is-in .trydan-tec__fila::after{transform:scaleX(1)}
.trydan-lp .trydan-tec__fila:nth-child(1){--d:.04s}
.trydan-lp .trydan-tec__fila:nth-child(2){--d:.10s}
.trydan-lp .trydan-tec__fila:nth-child(3){--d:.16s}
.trydan-lp .trydan-tec__fila:nth-child(4){--d:.22s}
.trydan-lp .trydan-tec__fila:nth-child(5){--d:.28s}
.trydan-lp .trydan-tec__fila:nth-child(6){--d:.34s}
.trydan-lp .trydan-tec__fila:nth-child(7){--d:.40s}
/* al pasar por encima la raya se pone naranja: senala la fila que estas leyendo */
.trydan-lp .trydan-tec__fila:hover::after{background:var(--t-accent)}

.trydan-lp .trydan-tec__fila dt{
  margin:0;
  font-size:clamp(.75rem,.8vw,.875rem);
  line-height:1.4;color:#8C8983;
}
.trydan-lp .trydan-tec__fila dd{
  margin:.28em 0 0;
  font-size:clamp(.9375rem,1vw,1.0625rem);
  line-height:1.45;color:var(--t-ink);
  font-variant-numeric:tabular-nums;
  text-wrap:pretty;
}

@media (prefers-reduced-motion:reduce){
  .trydan-anim--plano>*{opacity:1;transform:none}
  .trydan-lp .trydan-tec__fila::after{transform:scaleX(1);transition:none}
}

/* ═══ ENTRADAS QUE FALTABAN ═════════════════════════════════════════════
   Repaso de los textos que aparecian de golpe. Cinco contenedores mas con
   .trydan-anim en el contenido, y aqui las dos piezas que necesitan regla
   propia porque no son hijas directas de un contenedor animado. */

/* La leyenda y el eje de horas entran con las barras. La clase la pone el JS
   en la figura, no se usa :has(): si el navegador no lo soportara, la regla
   entera se caeria y el eje se quedaria invisible para siempre. */
.trydan-lp .trydan-eco__key,
.trydan-lp .trydan-eco__axis{
  opacity:0;
  transition:opacity .7s var(--t-ease) .25s;
}
.trydan-lp .trydan-eco__chart.is-visible .trydan-eco__key,
.trydan-lp .trydan-eco__chart.is-visible .trydan-eco__axis{opacity:1}

/* En el comparador, las dos columnas entran escalonadas (eso ya lo hace
   .trydan-anim--plano) y dentro de cada una las lineas caen una detras de
   otra. Es una lista de ventajas: leerla cayendo se entiende como "y ademas,
   y ademas", que es justo lo que dice. */
.trydan-lp .trydan-vs__list li{
  opacity:0;transform:translateY(9px);
  transition:opacity .55s var(--t-ease) var(--d,0s),
             transform .55s var(--t-ease) var(--d,0s);
}
.trydan-vs__cmp.is-in .trydan-vs__list li{opacity:1;transform:none}
.trydan-lp .trydan-vs__list li:nth-child(1){--d:.10s}
.trydan-lp .trydan-vs__list li:nth-child(2){--d:.17s}
.trydan-lp .trydan-vs__list li:nth-child(3){--d:.24s}
.trydan-lp .trydan-vs__list li:nth-child(4){--d:.31s}
.trydan-lp .trydan-vs__list li:nth-child(5){--d:.38s}

@media (prefers-reduced-motion:reduce){
  .trydan-lp .trydan-eco__key,
  .trydan-lp .trydan-eco__axis{opacity:1;transition:none}
  .trydan-lp .trydan-vs__list li{opacity:1;transform:none;transition:none}
}

/* ═══ LA GRAFICA EN MOVIL ═══════════════════════════════════════════════
   En un movil no hay hover, asi que el globo del precio solo saldria tocando
   cada barra. Y tocar una barra de 14px de ancho en un iPhone acaba en zoom de
   la pagina, que es justo lo que no queremos. Solucion: en los dispositivos sin
   hover la grafica se recorre sola las horas que elige Trydan. La clase la pone
   el JS; si toca la pantalla, manda el usuario y el paseo se apaga. */
.trydan-lp .trydan-eco__b.is-activa::after{background:var(--t-ink)}
.trydan-lp .trydan-eco__b.is-on.is-activa::after{background:var(--t-accent-dark)}
.trydan-lp .trydan-eco__b.is-activa .trydan-eco__tip{opacity:1}

/* El globo del precio vive dentro de su barra, y las barras siguientes se
   pintan despues, asi que lo tapaban. Se eleva la barra que manda —no el
   globo—: al ser position:relative, subirla la pone por encima de sus
   hermanas posteriores y el globo va con ella. */
.trydan-lp .trydan-eco__b:hover,
.trydan-lp .trydan-eco__b.is-activa,
.trydan-lp .trydan-eco__bars.is-visible .is-default{z-index:3}
.trydan-lp .trydan-eco__tip{z-index:4}
/* mientras corre el paseo, el globo fijo de la hora barata se aparta:
   el mismo papel que hace :hover en escritorio */
.trydan-lp .trydan-eco__bars.is-paseo .is-default .trydan-eco__tip{opacity:0}

/* Con 24 numeros en 390px de ancho no caben a 12px. Se dejan las 24 cajas para
   no desalinear el eje respecto a las barras y se muestra una de cada tres. */
@media(max-width:47.999rem){
  .trydan-lp .trydan-eco__axis li{visibility:hidden;white-space:nowrap}
  .trydan-lp .trydan-eco__axis li:nth-child(3n+1){visibility:visible}
}

/* ═══ BARRA SUPERIOR ════════════════════════════════════════════════════
   Va fija arriba y se coloca EN FUNCION de la cabecera del sitio, no por su
   cuenta. La cabecera del tema es position:fixed con margin-top:1em, y un
   script del sitio le pone la clase .hidden al bajar y se la quita al subir,
   con transition:transform .5s ease-in-out.

   Asi que aqui se copia esa misma curva y esa misma duracion: al bajar, la
   cabecera se va y la barra ocupa su sitio; al subir, la cabecera vuelve y la
   barra baja para quedarse justo debajo. Las dos se mueven a la vez porque
   comparten el tempo, no porque yo lo haya calculado dos veces.

   No lleva ni un solo enlace nuevo: los dos botones son los mismos destinos
   que ya estan en la pagina, siempre a mano. */
.trydan-topbar{
  position:fixed;
  inset:1em 0 auto;
  z-index:990;                      /* la cabecera del tema esta en 1000: ella manda */
  pointer-events:none;              /* la franja vacia no debe tapar la pagina */

  /* La barra y la cabecera del sitio NUNCA coexisten: ocupan el mismo hueco de
     arriba y manda la cabecera. Al bajar, la cabecera se va y la barra ocupa su
     sitio; al subir, la cabecera vuelve y la barra se retira por arriba.
     Ya no hay que medir donde colocarla —siempre va en el mismo top— y eso se
     lleva por delante todo el calculo de --baja.

     Se mueve con translate y no con transform para dejar transform libre, y se
     copia la curva y la duracion del tema (.5s ease-in-out) para que las dos se
     cruzen a la vez. */
  translate:0 -140%;
  transition:translate .5s ease-in-out,
             opacity .3s ease-in-out,
             visibility .5s ease-in-out;

  opacity:0;
  visibility:hidden;                /* sin JS no aparece: todos sus enlaces estan en la pagina */
}
/* visible en cuanto has bajado del primer pantallazo */
.trydan-topbar.is-dentro{opacity:1;visibility:visible;translate:0 0}


.trydan-topbar__caja{
  pointer-events:auto;
  /* Mas estrecha que la cabecera a cualquier ancho: la pastilla del tema es
     min(1275px, 90vw) y esta es min(1100px, 84vw), asi que siempre queda por
     dentro sin tener que medir nada. */
  width:min(1100px, 84vw, 100vw - 4.5rem);
  margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  min-height:2.75rem;
  padding:.5rem .35rem .5rem 1.35rem;
  background:#FAF9F7;
  border:1px solid rgba(46,46,42,.07);
  border-radius:999px;
  box-shadow:0 1px 2px rgba(46,46,42,.04), 0 10px 26px -18px rgba(46,46,42,.28);
}

.trydan-lp .trydan-topbar__info,
.trydan-topbar__info{
  margin:0;display:flex;align-items:baseline;gap:.55em;
  min-width:0;
}
.trydan-topbar__marca{
  font-size:clamp(.875rem,.95vw,1rem);font-weight:600;
  color:var(--t-ink);letter-spacing:-.01em;
  white-space:nowrap;
}
.trydan-topbar__sep{color:#C9C5BE;font-weight:400}
.trydan-topbar__claim{
  font-size:clamp(.8125rem,.9vw,.9375rem);
  color:var(--t-body);line-height:1.3;
}

.trydan-topbar__ctas{display:flex;align-items:center;gap:.5rem;flex:none}
.trydan-topbar__b{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.62em 1.15em;
  border-radius:999px;
  font-size:clamp(.8125rem,.9vw,.9375rem);font-weight:500;
  line-height:1.2;white-space:nowrap;
  text-decoration:none;
  transition:background-color .25s var(--t-ease),color .25s var(--t-ease),
             border-color .25s var(--t-ease),box-shadow .3s var(--t-ease);
}
/* el de contorno: el mismo que en el diseno, linea fina y fondo transparente */
.trydan-topbar__b.is-linea{
  color:var(--t-ink);
  border:1px solid var(--t-ink);
  background:transparent;
}
.trydan-topbar__b.is-linea:hover,
.trydan-topbar__b.is-linea:focus,
.trydan-topbar__b.is-linea:focus-visible,
.trydan-topbar__b.is-linea:active{
  background:var(--t-ink);color:#fff;
}
/* el macizo: negro, no naranja. Aqui el naranja lo tiene el CTA de la hero, y
   dos naranjas a la vez en pantalla se pelean por el mismo clic. */
.trydan-topbar__b.is-solido{
  background:var(--t-ink);color:#fff;border:1px solid var(--t-ink);
}
.trydan-topbar__b.is-solido:hover,
.trydan-topbar__b.is-solido:focus,
.trydan-topbar__b.is-solido:focus-visible,
.trydan-topbar__b.is-solido:active{
  background:#000;color:#fff;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.5);
}

/* Son botones, no enlaces de texto: el tema subraya los <a> al pasar por
   encima y aqui el subrayado los parte. Se apaga en los cuatro estados. */
.trydan-topbar__b,
.trydan-topbar__b:hover,
.trydan-topbar__b:focus,
.trydan-topbar__b:focus-visible,
.trydan-topbar__b:active{text-decoration:none}
.trydan-topbar__b:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}

/* En un movil no caben el reclamo y los dos botones. Se cae el reclamo —esta
   dicho en la pagina— y los botones se reparten el ancho, que es lo unico
   que la barra tiene que hacer ahi. */
@media(max-width:47.999rem){
  .trydan-topbar{inset:.6rem 0 auto}
  .trydan-topbar__caja{
    padding:.3rem;gap:.4rem;
    min-height:2.5rem;
  }
  .trydan-topbar__info{display:none}
  .trydan-topbar__ctas{flex:1;gap:.4rem}
  .trydan-topbar__b{flex:1;padding:.6em .5em}
}

@media (prefers-reduced-motion:reduce){
  .trydan-topbar{transition:opacity .01ms linear}
}

/* ═══ EL MENU INFERIOR ══════════════════════════════════════════════════ */

/* ── primero, un estilo del sitio que hay que apagar aqui ──────────────
   El snippet 10 ("padding para el menú") inyecta
     .entry-content > div:first-of-type{padding-top:150px}
   para despejar el menu fijo, y su JS solo lo retira si la pagina tiene un
   header.entry-header h1.entry-title. En esta pagina el titulo se quito, asi
   que ese JS no entra y el padding se queda.
   Hasta ahora no molestaba porque todas las secciones son <section> y el
   selector pide div. La barra superior SI es un div y es el primero, asi que
   se comia los 150px enteros.
   Se anula solo para nuestras dos barras fijas, que no pintan nada en el flujo. */
/* Solo la barra: el selector del snippet pide un div, y el menu inferior es un
   <nav>, asi que nunca le aplicaba. Anularselo "por si acaso" le estaba
   comiendo su propio relleno de arriba —(0,2,1) contra (0,1,0)— y el menu
   quedaba con aire a los lados y abajo pero pegado por arriba. */
.entry-content > div.trydan-topbar,
.entry-content > div.trydan-topbar:first-of-type{padding-top:0}
/* El tema ha subido la especificidad de su regla: ahora es
   body:not(.single-post) .entry-content > div:first-of-type, (0,3,2), y las
   dos de arriba (0,3,1) perdian. La barra bajaba 150px y se veia a media
   pantalla en vez de pegada arriba. La clase repetida sube la nuestra a (0,5,1)
   sin depender de cual sea el calificador del tema. */
.entry-content > div.trydan-topbar.trydan-topbar.trydan-topbar:first-of-type{padding-top:0}

/* ── el deslizamiento al pulsar una pastilla ───────────────────────────
   Con scroll-behavior y no con un bucle en JS a proposito: el deslizamiento
   nativo se cancela solo si el usuario toca la rueda a mitad de camino. Solo
   afecta a esta pagina, porque el snippet no se carga en ninguna otra. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* Donde para el deslizamiento. Lo calcula el JS sumando la cabecera del tema y
   la barra superior: sin esto el titular de la seccion aterriza DEBAJO de las
   dos y parece que el enlace te ha dejado en otro sitio. */
.trydan-lp[id]{scroll-margin-top:var(--t-aterrizaje,10rem)}

/* ── el dock ───────────────────────────────────────────────────────────
   Pastillas separadas y la que señalas se abre con su nombre. El ancho de
   apertura lo mide el JS etiqueta a etiqueta: con un max-width a ojo, "IA"
   llegaria a su ancho a mitad de la transicion y el gesto se veria cortado. */
.trydan-dock{
  position:fixed;
  left:50%;bottom:clamp(.9rem,2.5vw,1.75rem);
  transform:translateX(-50%);
  z-index:980;                       /* por debajo de la barra (990) y la cabecera (1000) */
  display:flex;align-items:center;gap:.4rem;
  max-width:calc(100vw - 1.6rem);
  padding:.3rem;
  background:rgba(255,255,255,.86);
  border:1px solid var(--t-linea);
  border-radius:999px;
  box-shadow:0 2px 6px rgba(46,46,42,.06), 0 18px 40px -22px rgba(46,46,42,.34);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);

  opacity:0;visibility:hidden;       /* sin JS no aparece */
  transition:opacity .35s var(--t-ease), visibility .35s var(--t-ease);
}
.trydan-dock.is-dentro{opacity:1;visibility:visible}

.trydan-dock__b{
  --alto:2.75rem;
  position:relative;flex:none;
  display:flex;align-items:center;
  height:var(--alto);
  padding:0 calc((var(--alto) - 1.35rem) / 2);
  border:0;border-radius:999px;
  background:#F4F3F1;
  color:var(--t-body);
  cursor:pointer;
  font-size:.8125rem;font-weight:500;line-height:1;
  text-decoration:none;
  transition:background-color .3s var(--t-ease), color .3s var(--t-ease),
             padding .4s var(--t-ease);
}
.trydan-dock__ico{flex:none;width:1.35rem;height:1.35rem;display:grid;place-items:center}
.trydan-dock__ico svg{width:100%;height:100%;display:block}
.trydan-dock__txt{
  display:block;overflow:hidden;white-space:nowrap;
  max-width:0;opacity:0;margin-left:0;
  transition:max-width .4s var(--t-ease), opacity .28s var(--t-ease), margin-left .4s var(--t-ease);
}

/* se abre a la derecha */
.trydan-dock__b:hover,
.trydan-dock__b:focus-visible{background:var(--t-ink);color:#fff}
.trydan-dock__b:hover .trydan-dock__txt,
.trydan-dock__b:focus-visible .trydan-dock__txt{
  max-width:var(--w,8rem);opacity:1;margin-left:.5rem;
}
/* son botones: el tema subraya los <a> al pasar y aqui el subrayado los parte */
.trydan-dock__b,
.trydan-dock__b:hover,
.trydan-dock__b:focus,
.trydan-dock__b:focus-visible,
.trydan-dock__b:active{text-decoration:none}
.trydan-dock__b:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}

/* la seccion en la que estas, marcada. Sin esto el dock es solo un atajo;
   con esto tambien te dice donde estas, que en una pagina asi de larga es
   la mitad de su valor. */
.trydan-dock__b.es-actual{background:var(--t-accent);color:#fff}
.trydan-dock__b.es-actual:hover,
.trydan-dock__b.es-actual:focus-visible{background:var(--t-accent-dark);color:#fff}

/* En un movil no hay hover. Antes iban todas las etiquetas puestas y el dock
   no cabia: habia que deslizarlo. Ahora (04/11/2026) solo iconos, y la pastilla
   de la seccion en la que estas se abre con su nombre; al bajar, el nombre va
   pasando de una a otra. Si en una pantalla estrecha aun no cabe, el JS desliza
   el dock para dejar la activa a la vista. */
@media (hover:none){
  .trydan-dock{
    gap:.15rem;padding:.25rem;
    max-width:calc(100vw - 1.25rem);
    justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .trydan-dock::-webkit-scrollbar{display:none}
  .trydan-dock__b{--alto:2.3rem}
  .trydan-dock .trydan-dock__txt{font-size:.75rem}
  .trydan-dock__b:hover .trydan-dock__txt,
  .trydan-dock__b:focus-visible .trydan-dock__txt{max-width:0;opacity:0;margin-left:0}
  .trydan-dock .trydan-dock__b.es-actual .trydan-dock__txt{max-width:var(--w,6rem);opacity:1;margin-left:.4rem}
  .trydan-dock__b:hover{background:#F4F3F1;color:var(--t-body)}
  .trydan-dock__b.es-actual:hover{background:var(--t-accent);color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .trydan-dock__b,.trydan-dock__txt{transition-duration:.01ms}
}

/* ═══ ARREGLOS DE MOVIL: DOS DESBORDAMIENTOS ════════════════════════════ */

/* ── 1 · la tarjeta del grafico se salia de la pantalla ─────────────────
   Causa: el eje tiene 24 <li> con flex:1 1 0, y al ponerles white-space:nowrap
   para el truco de "una hora de cada tres", cada uno paso a tener un
   min-content de 15px. Veinticuatro por quince mas los huecos son 403px de
   minimo, y una pista 1fr crece hasta el min-content de lo que lleva dentro:
   la tarjeta se estiraba a 403px sobre 323 utiles y se salia 80px.

   min-width:0 quita ese suelo. El numero visible se desborda sobre el hueco de
   sus vecinos ocultos, que esta vacio, y la pista ya no crece. */
.trydan-lp .trydan-eco__axis li,
.trydan-lp .trydan-eco__b{min-width:0}

/* Y el cinturon: ninguna pista de esta rejilla puede volver a estirarse por el
   min-content de su contenido, pase lo que pase dentro. */
.trydan-eco__grid>.wp-block-group__inner-container{grid-template-columns:minmax(0,1fr)}
@media(min-width:64rem){
  .trydan-eco__grid>.wp-block-group__inner-container{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ── 2 · el globo del divisor se salia por la izquierda ─────────────────
   Con nowrap mide 228px, y centrado en el 20,87% de 309 utiles se salia 50px en
   reposo y hasta 114px al arrastrar el tirador.

   El globo dice "Mueve el consumo de tu casa": es una INSTRUCCION, no la
   lectura de un valor. No tiene por que seguir al tirador. En movil se centra
   sobre la barra y se parte en dos lineas, y asi no puede salirse nunca. */
@media(max-width:47.999rem){

  /* ── el globo del divisor deja de ser un globo ─────────────────────────
     Centrado y en dos lineas seguia siendo una burbuja gris de 122px flotando
     sobre una barra de 309. Lo que dice es una INSTRUCCION —"muevelo"—, asi que
     en movil se convierte en una linea de ayuda a todo el ancho, sin burbuja ni
     flecha: no puede salirse, y se lee como lo que es. */
  .trydan-lp .trydan-bar__tip{
    left:0;right:0;
    transform:none;
    top:calc(100% + 10px);bottom:auto;
    max-width:none;
    background:transparent;color:var(--t-body);
    padding:0;
    white-space:normal;text-align:center;
    font-size:var(--t-fs-rot);letter-spacing:.08em;line-height:1.3;
  }
  .trydan-lp .trydan-bar__tip::after{display:none}

  /* ── las tres cifras, una por linea ───────────────────────────────────
     En tres columnas de 103px los rotulos partian en dos y tres lineas y la
     fila quedaba descuadrada. Una por linea, con la cifra alineada a la derecha
     en su columna y el rotulo al lado: cada una entra de un tiron y se lee como
     una tabla de tres sumas. */
  .trydan-stats>.wp-block-group__inner-container{
    grid-template-columns:1fr;
    gap:.5rem;
  }
  .trydan-stat>.wp-block-group__inner-container{
    display:grid;grid-template-columns:4.5rem 1fr;
    gap:.8rem;align-items:baseline;
  }
  .trydan-lp .trydan-stat__n{
    text-align:right;
    font-weight:600;              /* a 22px, el peso lo mete en la regla de texto grande */
  }
  .trydan-lp .trydan-stat__k{
    margin:0;
    letter-spacing:.06em;line-height:1.35;
  }

  /* ── los rotulos de seccion no llegan de borde a borde ─────────────────
     "ACTIVA LA FUNCION ECOCHARGING" son 29 caracteres, y a .3em de tracking
     median 347px sobre 337 disponibles: tocaba los dos bordes o partia mal.
     A .16em mide 294 y le quedan 43px de aire. */
  .trydan-lp .trydan-eyebrow{
    letter-spacing:.16em;
    text-indent:.08em;
    line-height:1.4;
  }

  /* ── el chat de la IA, con forma de movil ──────────────────────────────
     La pantalla tenia aspect-ratio 1280/630: en movil eran 317x156px, y cuatro
     burbujas de conversacion no caben en 156px de alto. Se recortaban contra el
     overflow:hidden y la caja se veia vacia. Vertical si caben, y ademas es lo
     que la seccion esta contando: una conversacion en el movil. */
  .trydan-lp .trydan-ia__frame{
    width:min(84vw,20rem);
    border-radius:36px;
  }
  .trydan-lp .trydan-ia__screen{
    aspect-ratio:9/17;
    border-radius:34.5px;
    padding:2.5rem 1rem 1.15rem;
  }
  /* el altavoz: es lo que hace que se lea como un telefono y no como un rectangulo */
  .trydan-lp .trydan-ia__screen::before{
    content:"";
    position:absolute;top:1.1rem;left:50%;
    transform:translateX(-50%);
    width:3.25rem;height:.3rem;
    border-radius:999px;
    background:rgba(255,255,255,.16);
  }
  .trydan-lp .trydan-ia__chat{gap:.55rem}
  .trydan-lp .trydan-ia__msg{max-width:86%}
}

/* ═══ 13 · CONTACTO LIBRE ═══════════════════════════════════════════════
   Cierra la pagina con la puerta abierta: quien no ha encontrado su respuesta
   en trece secciones, la pregunta aqui. Y debajo, separado, el camino para
   quien YA tiene un Trydan: no es un cliente potencial, es un cliente, y
   mandarlo al mismo formulario de ventas es hacerle perder el tiempo. */
.trydan-contacto{
  background:var(--t-bg);
  padding:clamp(3rem,7vw,8.5rem) var(--t-gutter-sec);
}
.trydan-contacto__head{text-align:center;max-width:46rem;margin-inline:auto}
.trydan-lp .trydan-contacto__head .trydan-h2{margin:0}
.trydan-lp .trydan-contacto__head .trydan-body{margin-inline:auto;max-width:38rem}

.trydan-contacto__caja{
  max-width:34rem;margin:clamp(2rem,4vw,3.25rem) auto 0;
  background:var(--t-carta,#fff);
  border:1px solid var(--t-linea);
  border-radius:var(--t-r-media);
  padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:0 1px 2px rgba(46,46,42,.04), 0 20px 44px -28px rgba(46,46,42,.26);
}
/* el textarea del mensaje: lo unico que este formulario tiene y el otro no */
.trydan-lp .trydan-form textarea{
  width:100%;box-sizing:border-box;
  min-height:7rem;resize:vertical;
  padding:.8rem 1rem;
  background:#FBFAF9;color:var(--t-ink);
  border:1px solid #E4E1DC;border-radius:var(--t-r-btn);
  font-family:inherit;font-size:1rem;line-height:1.5;   /* 16px: evita el zoom de iOS */
  transition:border-color .25s var(--t-ease),background-color .25s var(--t-ease);
}
.trydan-lp .trydan-form textarea:focus{outline:0;border-color:var(--t-accent);background:#fff}
.trydan-lp .trydan-form textarea::placeholder{color:#9B9891;opacity:1}

/* ── el pie: soporte, separado de la venta ──────────────────────────── */
.trydan-contacto__pie{
  margin-top:clamp(1.5rem,2.6vw,2rem);
  padding-top:clamp(1.25rem,2.2vw,1.75rem);
  border-top:1px solid var(--t-linea);
  text-align:center;
}
.trydan-lp .trydan-contacto__pregunta{
  margin:0 0 .8rem;
  font-size:clamp(.875rem,.95vw,1rem);
  color:var(--t-body);
}
.trydan-lp .trydan-contacto__soporte{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.7em 1.35em;
  color:var(--t-ink);
  background:transparent;
  border:1px solid var(--t-ink);border-radius:var(--t-r-pill);
  font-size:clamp(.875rem,.95vw,1rem);font-weight:600;line-height:1.2;
  text-decoration:none;
  transition:background-color .28s var(--t-ease),color .28s var(--t-ease);
}
.trydan-lp .trydan-contacto__soporte:hover,
.trydan-lp .trydan-contacto__soporte:focus-visible{
  background:var(--t-ink);color:#fff;
}
/* es un boton, no un enlace de texto: el tema subraya los <a> al pasar */
.trydan-lp .trydan-contacto__soporte,
.trydan-lp .trydan-contacto__soporte:hover,
.trydan-lp .trydan-contacto__soporte:focus,
.trydan-lp .trydan-contacto__soporte:focus-visible,
.trydan-lp .trydan-contacto__soporte:active{text-decoration:none}
.trydan-lp .trydan-contacto__soporte:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
/* la flecha avanza un poco: dice "esto te lleva a otro sitio" */
.trydan-contacto__soporte-ico{
  display:grid;place-items:center;
  transition:transform .3s var(--t-ease);
}
.trydan-lp .trydan-contacto__soporte:hover .trydan-contacto__soporte-ico{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .trydan-contacto__soporte-ico{transition:none}
}

/* ── contacto a dos columnas: el texto pregunta, el formulario contesta ──
   En escritorio el texto va a la izquierda y el formulario a la derecha. Se
   hace sobre el contenedor interno de la seccion, que ya tiene como hijos
   exactamente esos dos bloques: no hace falta envolver nada mas. */
@media(min-width:64rem){
  .trydan-contacto>.wp-block-group__inner-container{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(2.5rem,5vw,6rem);
    align-items:center;
    max-width:1400px;margin-inline:auto;
  }
  .trydan-contacto__head{text-align:left;max-width:none;margin:0}
  .trydan-lp .trydan-contacto__head .trydan-body{margin-inline:0;max-width:34ch}
  .trydan-contacto__caja{margin:0;max-width:none}
}

/* La rejilla propia del formulario. CF7 lo sirve con tres .column-half en la
   primera fila, y a lo ancho de media pantalla tres campos en linea quedan
   estrechos. Nombre y Telefono comparten fila, y Email se lleva la suya:
   son los dos datos cortos juntos y el largo aparte. */
.trydan-contacto__form .column-half,
.trydan-contacto__form .column-full{width:auto;float:none;padding:0}
.trydan-contacto__form .form-row{display:grid;grid-template-columns:1fr}
@media(min-width:30rem){
  .trydan-contacto__form .form-row:first-of-type{
    grid-template-columns:1fr 1fr;
    column-gap:.7rem;
  }
  .trydan-contacto__form .form-row:first-of-type .column-half:nth-child(3){
    grid-column:1 / -1;
  }
}

/* ── las etiquetas del formulario estaban en blanco sobre blanco ─────────
   Dos snippets globales las pintan de blanco, pensados para formularios sobre
   fondo oscuro: el 19 con .form-row{color:white} y el 14 con .wpcf7 p{...}.
   Aqui la tarjeta es blanca, asi que las etiquetas existian y no se veian.
   Se recuperan solo dentro de esta seccion, con especificidad suficiente:
   la suya es (0,1,0) y (0,1,1); estas son (0,3,0) y (0,3,1). */
.trydan-lp .trydan-contacto__form .form-row{color:var(--t-body)}
.trydan-lp .trydan-contacto__form .wpcf7 p{
  color:var(--t-body);
  font-size:clamp(.75rem,.8vw,.875rem);
  font-weight:500;
  letter-spacing:.02em;
}
/* el asterisco de obligatorio, en el naranja de la pagina */
.trydan-lp .trydan-contacto__form .wpcf7-form-control-wrap{display:block;margin-top:.3rem}

/* ── menos aire entre el formulario y el boton de soporte ────────────────
   El snippet 14 mete .wpcf7 p{margin-bottom:1em !important} y eso se sumaba a
   la separacion del pie: 76px en total. Se anula en la ultima fila —la del
   boton de enviar— y el pie se acerca. */
.trydan-lp .trydan-contacto__form .form-row:last-of-type p{margin-bottom:0!important}
.trydan-contacto__pie{
  margin-top:clamp(.75rem,1.1vw,1rem);
  padding-top:clamp(.9rem,1.3vw,1.15rem);
}

/* ── el dock se aparta al llegar a contacto ──────────────────────────────
   Al entrar la seccion de contacto ya has terminado de navegar, y en movil el
   dock tapaba justo el boton de enviar. Se retira hacia abajo.
   Se mueve con la propiedad translate y no con transform: transform ya lo usa
   el propio dock para centrarse (y en movil no), asi que tocarlo aqui pelearia
   con el centrado en un breakpoint y no en el otro. */
.trydan-dock{
  transition:opacity .35s var(--t-ease), visibility .35s var(--t-ease),
             translate .4s var(--t-ease);
}
.trydan-dock.is-fuera{
  opacity:0;visibility:hidden;
  translate:0 130%;
}

/* ═══ BOTON "CONOCE MAS" ════════════════════════════════════════════════
   Pildora oscura con el + en un circulo claro. Es el disparador del pop-up
   de la seccion, y de momento —y para quien no tenga JS— es un enlace de
   verdad a la pagina de soporte: nunca un boton muerto.

   El + no gira al pasar por encima: girarlo insinuaria que despliega ahi
   mismo, y lo que hace es abrir una ventana. Lo que se mueve es el circulo,
   que se aclara, y eso basta para decir "pulsable". */
.trydan-lp .trydan-mas__linea{margin:clamp(1.5rem,2.4vw,2.25rem) 0 0}
.trydan-lp .trydan-mas{
  display:inline-flex;align-items:center;gap:.85em;
  padding:.45rem .45rem .45rem 1.4rem;
  background:var(--t-ink);color:#fff;
  border:0;border-radius:var(--t-r-pill);
  font-size:clamp(.875rem,.95vw,1rem);font-weight:500;line-height:1.2;
  cursor:pointer;
  transition:background-color .28s var(--t-ease),box-shadow .3s var(--t-ease);
}
.trydan-lp .trydan-mas__ico{
  display:grid;place-items:center;flex:none;
  width:1.85rem;height:1.85rem;
  border-radius:999px;
  background:rgba(255,255,255,.17);
  transition:background-color .28s var(--t-ease);
}
.trydan-lp .trydan-mas:hover,
.trydan-lp .trydan-mas:focus-visible{
  background:#000;
  box-shadow:0 12px 26px -16px rgba(0,0,0,.55);
}
.trydan-lp .trydan-mas:hover .trydan-mas__ico,
.trydan-lp .trydan-mas:focus-visible .trydan-mas__ico{background:rgba(255,255,255,.3)}
/* es un boton: el tema subraya los <a> al pasar por encima */
.trydan-lp .trydan-mas,
.trydan-lp .trydan-mas:hover,
.trydan-lp .trydan-mas:focus,
.trydan-lp .trydan-mas:focus-visible,
.trydan-lp .trydan-mas:active{text-decoration:none;color:#fff}
.trydan-lp .trydan-mas:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .trydan-lp .trydan-mas,.trydan-lp .trydan-mas__ico{transition:none}
}

/* ═══ POP-UP FOTOVOLTAICA · ANIMADO ═════════════════════════════════════
   Version minima: sin cajas, sin leyendas, sin chips. Un protagonista por
   seccion, cifras grandes y finas, una linea de acento y mucho aire.
   01 · un dia de sol (.trydan-fv)   02 · los modos (.trydan-md)   03 · tres lineas
   Todo el texto es marcado y se traduce con la pagina. Las cifras las calcula
   el JS con un dia de EJEMPLO, y el propio bloque lo dice. */

/* OJO: el dialogo lleva .trydan-lp Y .trydan-pot en el mismo elemento, asi que
   el selector es .trydan-pot .X y no .trydan-lp .trydan-pot .X */
.trydan-pot .trydan-sol__escena{aspect-ratio:2 / 1}
.trydan-pot .trydan-sol__escena img{object-position:50% 55%}
.trydan-pot .trydan-sol__escena--sola{aspect-ratio:1597 / 985}
.trydan-lp .trydan-sol__escena--sola img{object-position:50% 50%}

.trydan-lp .trydan-fv,
.trydan-lp .trydan-md{margin-top:clamp(1.75rem,3.4vw,3rem);display:grid;gap:clamp(1.5rem,3vw,2.5rem)}

/* 01: el instante flota sobre el borde de la foto, un poco mas estrecho que ella */
.trydan-pot .trydan-sol__escena:not(.trydan-sol__escena--sola){aspect-ratio:16 / 9}
.trydan-lp .trydan-fv{
  position:relative;z-index:1;width:88%;margin-inline:auto;
  margin-top:calc(clamp(3.5rem,7vw,5rem) * -1);
  padding:clamp(1.25rem,2.6vw,2.25rem);
  background:rgba(255,255,255,.88);border-radius:var(--t-r-media);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.04);
}
@media(max-width:47.999rem){
  .trydan-lp .trydan-fv{width:100%;margin-top:-2.5rem;padding:1.1rem}
  .trydan-lp .trydan-sol__escena:not(.trydan-sol__escena--sola) img{aspect-ratio:4 / 3}
  .trydan-lp .trydan-fv__dv b{font-size:1.5rem}
  .trydan-lp .trydan-fv__dv small{display:none}
}

/* etiqueta pequena sobre cada cifra */
.trydan-lp .trydan-fv__dk{font-size:var(--t-fs-rot);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-tenue)}

/* 01 · tres cifras, sin cajas */
.trydan-lp .trydan-fv__cifras{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,2vw,2rem);
}
.trydan-lp .trydan-fv__cifras li{display:flex;flex-direction:column;gap:.5rem;padding-top:1rem;border-top:1px solid var(--t-linea)}
.trydan-lp .trydan-fv__cifras .es-prod{border-top-color:var(--t-accent)}
.trydan-lp .trydan-fv__dv{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--t-ink)}
.trydan-lp .trydan-fv__dv b{font-size:clamp(1.75rem,1.1rem + 2.6vw,3.5rem);font-weight:300;letter-spacing:-.02em;line-height:1}
.trydan-lp .trydan-fv__dv small{font-size:var(--t-fs-sec);font-weight:400;margin-left:.35em;color:var(--t-tenue)}
.trydan-lp .trydan-fv__cifras .es-coche .trydan-fv__dv{color:var(--t-accent-dark)}
.trydan-lp .trydan-fv__cifras .es-texto .trydan-fv__dv b{font-size:var(--t-fs-p);font-weight:400;letter-spacing:0;color:var(--t-tenue)}
.trydan-lp .trydan-fv__cifras .es-texto .trydan-fv__dv small{display:none}

/* la grafica */
.trydan-lp .trydan-fv__svg{display:block;width:100%;height:clamp(8rem,16vw,11rem);overflow:visible}
.trydan-lp .trydan-fv__svg .es-fondo{opacity:.22}
.trydan-lp .trydan-fv__svg .es-area{fill:var(--t-accent);stroke:none}
.trydan-lp .trydan-fv__svg .es-lp{fill:none;stroke:var(--t-accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.trydan-lp .trydan-fv__svg .es-lc{fill:none;stroke:var(--t-ink);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.trydan-lp .trydan-fv__svg .es-cursor{stroke:var(--t-ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.4}
.trydan-lp .trydan-fv__ejex{
  display:flex;justify-content:space-between;margin-top:.6rem;
  font-size:var(--t-fs-rot);color:var(--t-tenue);font-variant-numeric:tabular-nums;
}

/* reproducir, hora: sin fondo, una sola linea */
.trydan-lp .trydan-fv__ctrl{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.1rem)}
.trydan-lp .trydan-fv__play{
  flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;margin:0;
  border:1px solid var(--t-hover);border-radius:999px;background:transparent;color:var(--t-ink);cursor:pointer;
  transition:border-color .25s var(--t-ease),color .25s var(--t-ease);
}
.trydan-lp .trydan-fv__play:hover{border-color:var(--t-ink)}
.trydan-lp .trydan-fv__play:focus-visible{outline:2px solid var(--t-accent-dark);outline-offset:3px}
.trydan-lp .trydan-fv__play .es-play{display:none}
.trydan-lp .trydan-fv__play[aria-pressed="true"] .es-play{display:block}
.trydan-lp .trydan-fv__play[aria-pressed="true"] .es-pausa{display:none}
.trydan-lp .trydan-fv__rango{
  flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;height:1.5rem;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent;outline:0;box-shadow:none;
  --v:0%;
}
.trydan-lp .trydan-fv__rango::-webkit-slider-runnable-track{
  height:2px;border-radius:999px;border:0;
  background:linear-gradient(to right,var(--t-ink) var(--v),var(--t-linea) var(--v));
}
.trydan-lp .trydan-fv__rango::-moz-range-track{
  height:2px;border-radius:999px;border:0;
  background:linear-gradient(to right,var(--t-ink) var(--v),var(--t-linea) var(--v));
}
.trydan-lp .trydan-fv__rango::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:1rem;height:1rem;margin-top:calc(-.5rem + 1px);
  border-radius:999px;border:0;background:var(--t-ink);
}
.trydan-lp .trydan-fv__rango::-moz-range-thumb{width:1rem;height:1rem;border-radius:999px;border:0;background:var(--t-ink)}
.trydan-lp .trydan-fv__rango:focus-visible{outline:2px solid var(--t-accent-dark);outline-offset:4px;border-radius:6px}
.trydan-lp .trydan-fv__hora{
  flex:none;min-width:3.4em;text-align:right;
  font-size:var(--t-fs-sec);font-weight:600;font-variant-numeric:tabular-nums;color:var(--t-ink);
}
.trydan-lp .trydan-fv__nota{
  margin:clamp(1.25rem,2.4vw,1.75rem) 0 0;max-width:56ch;
  font-size:var(--t-fs-sec);line-height:1.55;color:var(--t-tenue);text-wrap:pretty;
}

/* 02 · los tres tramos: texto y una linea de color arriba */
.trydan-lp .trydan-md__tiras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,2vw,2rem)}
.trydan-lp .trydan-md__tramo{
  margin:0;display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;text-align:left;
  padding:1rem 0 0;border:0;border-top:3px solid var(--t-linea);border-radius:0;cursor:pointer;
  font-family:inherit;letter-spacing:normal;text-transform:none;background:transparent;
  color:var(--t-tenue);transition:color .3s var(--t-ease),border-color .3s var(--t-ease);
}
.trydan-lp .trydan-md__tramo:hover{color:var(--t-ink)}
.trydan-lp .trydan-md__tramo.es-ahora{color:var(--t-ink)}
.trydan-lp .trydan-md__tramo.es-red.es-ahora{border-top-color:var(--t-tenue)}
.trydan-lp .trydan-md__tramo.es-sol.es-ahora{border-top-color:var(--t-accent)}
.trydan-lp .trydan-md__tramo.es-mix.es-ahora{border-top-color:var(--t-accent-dark)}
.trydan-lp .trydan-md__tramo:focus-visible{outline:2px solid var(--t-accent-dark);outline-offset:4px}
.trydan-lp .trydan-md__tn{font-size:var(--t-fs-sec);font-weight:600;line-height:1.3}
.trydan-lp .trydan-md__th{font-size:var(--t-fs-rot);font-variant-numeric:tabular-nums;color:var(--t-tenue);white-space:nowrap}

/* el flujo: cuatro cifras en las esquinas y cuatro hilos finos */
.trydan-lp .trydan-md__escena{position:relative;height:clamp(13rem,24vw,16rem)}
.trydan-lp .trydan-md__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trydan-lp .trydan-md__t{fill:none;stroke:var(--t-linea);stroke-width:1;vector-effect:non-scaling-stroke}
.trydan-lp .trydan-md__f{
  fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:.01 var(--p,12px);opacity:0;
  transition:opacity .4s var(--t-ease),stroke-width .4s var(--t-ease);
}
.trydan-lp .trydan-md__f.es-sol{stroke:var(--t-accent)}
.trydan-lp .trydan-md__f.es-red{stroke:var(--t-tenue)}
.trydan-lp .trydan-md__f.es-on{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .trydan-lp .trydan-md__f.es-on{animation:trydan-md-corre 1.1s linear infinite}
}
@keyframes trydan-md-corre{to{stroke-dashoffset:calc(var(--p,12px) * -1)}}
.trydan-lp .trydan-md__n{
  position:absolute;display:flex;flex-direction:column;gap:.3rem;transform:translateY(-50%);
  transition:opacity .4s var(--t-ease);
}
.trydan-lp .trydan-md__n.es-paneles{left:0;top:22%}
.trydan-lp .trydan-md__n.es-red{left:0;top:78%}
.trydan-lp .trydan-md__n.es-casa{right:0;top:22%;align-items:flex-end}
.trydan-lp .trydan-md__n.es-coche{right:0;top:78%;align-items:flex-end}
.trydan-lp .trydan-md__n.es-off{opacity:.4}
.trydan-lp .trydan-md__n b{font-size:var(--t-fs-num);font-weight:300;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--t-ink)}
.trydan-lp .trydan-md__n b small{font-size:var(--t-fs-sec);font-weight:400;margin-left:.35em;color:var(--t-tenue);letter-spacing:0}
.trydan-lp .trydan-md__n.es-paneles b,
.trydan-lp .trydan-md__n.es-coche b{color:var(--t-accent-dark)}
.trydan-lp .trydan-md__pie{
  margin:0;min-height:3.2em;max-width:56ch;
  font-size:var(--t-fs-p);line-height:1.55;color:var(--t-body);text-wrap:pretty;
}

/* 03 · tres lineas */
.trydan-lp .trydan-fv__tres{
  list-style:none;margin:clamp(1.75rem,3.4vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.25rem,2.4vw,2rem);
}
@media(min-width:48rem){.trydan-lp .trydan-fv__tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trydan-lp .trydan-fv__tres li{display:flex;flex-direction:column;gap:.5rem;padding-top:1rem;border-top:1px solid var(--t-linea)}
.trydan-lp .trydan-fv__tres h4{margin:0;font-size:var(--t-fs-p);font-weight:600;line-height:1.3;color:var(--t-ink)}
.trydan-lp .trydan-fv__tres p{margin:0;font-size:var(--t-fs-sec);line-height:1.55;color:var(--t-body);text-wrap:pretty}

/* movil: los tramos en lista, el flujo mas compacto */
@media(max-width:47.999rem){
  .trydan-lp .trydan-md__tiras{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .trydan-lp .trydan-md__tramo{flex-direction:row;justify-content:space-between;align-items:baseline;padding:.75rem 0;border-top:0;border-left:3px solid var(--t-linea);padding-left:.9rem}
  .trydan-lp .trydan-md__tramo.es-red.es-ahora{border-left-color:var(--t-tenue)}
  .trydan-lp .trydan-md__tramo.es-sol.es-ahora{border-left-color:var(--t-accent)}
  .trydan-lp .trydan-md__tramo.es-mix.es-ahora{border-left-color:var(--t-accent-dark)}
  .trydan-lp .trydan-md__escena{height:13rem}
  .trydan-lp .trydan-md__n b{font-size:var(--t-fs-h3)}
}

/* ── el pop-up entero sobre el gris, con la foto pegada arriba ─────────
   Sin numeracion: la foto abre la ventana, la tarjeta flota sobre su borde
   inferior y despues vienen el titular y las dos secciones, todo en gris. */
#dlg-fotovoltaica .trydan-pot__caja{background:var(--t-sup)}
#dlg-fotovoltaica .trydan-sol__escena:not(.trydan-sol__escena--sola){
  margin:0;aspect-ratio:16 / 9;border-radius:var(--t-r-media) var(--t-r-media) 0 0;
}
#dlg-fotovoltaica .trydan-fv__hero .trydan-fv__nota{padding-inline:var(--t-pad);margin-top:clamp(1.25rem,2.4vw,1.75rem)}
#dlg-fotovoltaica .trydan-pot__cab{padding-top:clamp(1.5rem,3vw,2.5rem);border-radius:0}
#dlg-fotovoltaica .trydan-pot__sec{padding-top:clamp(1.5rem,3vw,2.5rem)}
#dlg-fotovoltaica .trydan-pot__sec+.trydan-pot__sec{border-top:0}
#dlg-fotovoltaica .trydan-pot__sec:last-child{padding-bottom:clamp(2.5rem,5vw,4.5rem)}
#dlg-fotovoltaica .trydan-sol__escena--sola{background:transparent}
@media(max-width:47.999rem){
  #dlg-fotovoltaica .trydan-fv{width:92%}
}

/* un solo margen izquierdo para tarjeta, titular y secciones, mas cerca del borde */
#dlg-fotovoltaica .trydan-pot__caja{--t-pad:clamp(1.25rem,2.6vw,2.25rem)}
#dlg-fotovoltaica .trydan-fv{width:calc(100% - 2 * var(--t-pad))}
@media(max-width:47.999rem){
  #dlg-fotovoltaica .trydan-fv{width:calc(100% - 2 * var(--t-pad))}
}

/* la foto de arriba nunca pasa del 56 % de la altura de la ventana */
#dlg-fotovoltaica .trydan-fv__hero .trydan-sol__escena{max-height:56vh;width:100%}

/* escritorio: la tarjeta va dentro de la foto, a la derecha, mas estrecha y compacta;
   los textos de debajo recuperan su margen hacia dentro */
#dlg-fotovoltaica .trydan-pot__caja{--t-pad:clamp(1.5rem,5vw,5rem)}
@media(min-width:48rem){
  #dlg-fotovoltaica .trydan-fv__hero{position:relative}
  #dlg-fotovoltaica .trydan-fv__hero .trydan-sol__escena{min-height:26rem}
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv{
    position:absolute;right:clamp(1rem,2vw,1.75rem);bottom:clamp(1rem,2vw,1.75rem);
    width:min(46%,34rem);margin:0;padding:clamp(1rem,1.6vw,1.5rem);gap:clamp(.75rem,1.2vw,1rem);
    background:rgba(255,255,255,.8);
  }
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv__cifras{gap:clamp(.5rem,1vw,1rem)}
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv__cifras li{gap:.3rem;padding-top:.7rem}
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv__dv b{font-size:clamp(1.5rem,1rem + 1.3vw,2.25rem)}
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv__svg{height:clamp(5rem,8vw,7rem)}
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv__ejex{margin-top:.4rem}
}

/* 02 · los modos: una tarjeta blanca; el flujo a la izquierda y la pantalla de la app,
   que es a la vez el selector de tramo, a la derecha */
#dlg-fotovoltaica .trydan-md__tarjeta{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:center;
  padding:clamp(1.25rem,2.6vw,2.25rem);
  background:rgba(255,255,255,.88);border-radius:var(--t-r-media);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.04);
}
@media(min-width:48rem){#dlg-fotovoltaica .trydan-md__tarjeta{grid-template-columns:minmax(0,1fr) 15rem}}
#dlg-fotovoltaica .trydan-md__izq{display:grid;gap:1rem;min-width:0}
#dlg-fotovoltaica .trydan-md__escena{height:clamp(10.5rem,17vw,12.5rem)}
#dlg-fotovoltaica .trydan-md__n b{font-size:clamp(1.25rem,.9rem + 1vw,1.875rem)}
#dlg-fotovoltaica .trydan-md__pie{min-height:3em;font-size:var(--t-fs-sec);max-width:none}

/* la pantalla de la app, con el estilo real: fondo gris, tarjetas blancas, boton negro, barra inferior negra */
#dlg-fotovoltaica .trydan-md__cab{grid-column:1 / -1}
#dlg-fotovoltaica .trydan-md__cab .trydan-sol__h{margin-top:0}
@media(min-width:48rem){#dlg-fotovoltaica .trydan-md__tarjeta{grid-template-columns:minmax(0,1fr) 16.5rem}}
#dlg-fotovoltaica .trydan-md__tel{
  display:flex;flex-direction:column;position:relative;width:100%;max-width:16.5rem;justify-self:center;
  padding:0;background:#EEEEEE;color:#101010;font-size:.7rem;line-height:1.3;
  border:6px solid #1b1b19;border-radius:2.2rem;overflow:hidden;
}
#dlg-fotovoltaica .trydan-md__tel::before{display:none}
#dlg-fotovoltaica .trydan-md__tel-cab{display:flex;align-items:center;gap:.4rem;padding:1.1rem .8rem .2rem}
#dlg-fotovoltaica .trydan-md__tel-t{margin:0;flex:1;text-align:center;padding-right:.9rem;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
#dlg-fotovoltaica .trydan-md__tel-s{margin:.55rem .9rem .5rem;text-align:center;font-size:.62rem;color:#4a4a4a}
#dlg-fotovoltaica .trydan-md__tel-seg{display:grid;grid-template-columns:1fr 1fr;margin:0 .6rem;padding:.2rem;border-radius:999px;background:#F7F7F7}
#dlg-fotovoltaica .trydan-md__tel-seg span{padding:.4rem .2rem;text-align:center;border-radius:999px;font-size:.5rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#8a8a8a}
#dlg-fotovoltaica .trydan-md__tel-seg .es-on{background:#101010;color:#fff}
#dlg-fotovoltaica .trydan-md__tel-card{margin:.55rem .6rem 0;padding:.7rem .7rem .3rem;background:#fff;border:1px solid #E3E3E3;border-radius:.9rem}
#dlg-fotovoltaica .trydan-md__tel-h{margin:0;font-size:.8rem;font-weight:700}
#dlg-fotovoltaica .trydan-md__tel-barra{display:flex;gap:2px;height:1rem;margin:.6rem 0 .25rem}
#dlg-fotovoltaica .trydan-md__tel-barra i{display:block;border-radius:.35rem;opacity:.35;transition:opacity .3s var(--t-ease)}
#dlg-fotovoltaica .trydan-md__tel-barra .es-red{background:#8d8d92}
#dlg-fotovoltaica .trydan-md__tel-barra .es-sol{background:var(--t-accent)}
#dlg-fotovoltaica .trydan-md__tel-barra .es-mix{background:repeating-linear-gradient(135deg,var(--t-accent) 0 3px,#8d8d92 3px 6px)}
#dlg-fotovoltaica .trydan-md__tel:has(.trydan-md__tramo.es-red.es-ahora) .trydan-md__tel-barra .es-red,
#dlg-fotovoltaica .trydan-md__tel:has(.trydan-md__tramo.es-sol.es-ahora) .trydan-md__tel-barra .es-sol,
#dlg-fotovoltaica .trydan-md__tel:has(.trydan-md__tramo.es-mix.es-ahora) .trydan-md__tel-barra .es-mix{opacity:1}
#dlg-fotovoltaica .trydan-md__tel-ejes{display:flex;justify-content:space-between;font-size:.5rem;color:#9a9a9a;font-variant-numeric:tabular-nums}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__tramo{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n ok" "h ok";align-items:center;
  gap:.05rem .5rem;width:100%;margin:.5rem 0 0;padding:.5rem 0 .45rem;
  border:0;border-top:1px solid #EEEEEE;border-radius:0;background:transparent;color:#8a8a8a;
}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__tramo:hover{color:#101010}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__tramo.es-ahora{color:#101010;border-color:#EEEEEE}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__tn{grid-area:n;font-size:.66rem;font-weight:700}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__th{grid-area:h;font-size:.58rem;color:#8a8a8a}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__ok{width:.9rem;height:.9rem}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__tramo.es-ahora .trydan-md__ok{background:#101010;border-color:#101010;box-shadow:inset 0 0 0 3px #fff}
#dlg-fotovoltaica .trydan-md__tel-g{margin:.6rem .6rem 0;padding:.6rem;text-align:center;border-radius:999px;background:#000;color:#fff;font-size:.66rem;font-weight:700}
#dlg-fotovoltaica .trydan-md__tel-nav{display:flex;justify-content:space-around;margin:.7rem .35rem .5rem;padding:.5rem .15rem .4rem;border-radius:1rem;background:#000;color:#fff}
#dlg-fotovoltaica .trydan-md__tel-nav span{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.4rem}
#dlg-fotovoltaica .trydan-md__tel-nav .es-on{color:#FF1A1A}
@media(max-width:47.999rem){#dlg-fotovoltaica .trydan-md__escena{height:11rem}}

@media(max-width:47.999rem){
  #dlg-fotovoltaica .trydan-md__n b{font-size:1.125rem}
  #dlg-fotovoltaica .trydan-md__n b small{display:none}
}

#dlg-fotovoltaica .trydan-md__ok{
  grid-area:ok;display:block;border-radius:999px;border:1.5px solid #CFCFCF;
  transition:background-color .3s var(--t-ease),border-color .3s var(--t-ease);
}
#dlg-fotovoltaica .trydan-md__tel-nav span{font-size:.46rem}

/* sin lineas decorativas sobre las cifras; la bateria del coche se llena con la carga */
#dlg-fotovoltaica .trydan-fv__cifras li,
#dlg-fotovoltaica .trydan-fv__hero .trydan-fv__cifras li{padding-top:0;border-top:0}
#dlg-fotovoltaica .trydan-fv__bat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;margin:0}
#dlg-fotovoltaica .trydan-fv__bat b{font-size:var(--t-fs-sec);font-weight:600;font-variant-numeric:tabular-nums;min-width:2.8em;text-align:right;color:var(--t-ink)}
#dlg-fotovoltaica .trydan-fv__celda{position:relative;display:block;height:.9rem;padding:2px;border:1.5px solid var(--t-ink);border-radius:.4rem}
#dlg-fotovoltaica .trydan-fv__celda::after{content:"";position:absolute;right:-5px;top:50%;width:3px;height:.4rem;margin-top:-.2rem;border-radius:0 2px 2px 0;background:var(--t-ink)}
#dlg-fotovoltaica .trydan-fv__celda i{display:block;height:100%;width:35%;border-radius:.2rem;background:var(--t-accent);transition:width .35s linear}
@media(prefers-reduced-motion:reduce){#dlg-fotovoltaica .trydan-fv__celda i{transition:none}}

/* la bateria del coche: pildora verde sobre la tarjeta, a la derecha */
#dlg-fotovoltaica .trydan-fv__flota{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:.65rem}
#dlg-fotovoltaica .trydan-fv__bat{
  display:inline-flex;align-items:center;gap:.6rem;margin:0;padding:.4rem .95rem;border-radius:999px;
  background:#23874A;color:#fff;font-size:var(--t-fs-sec);font-weight:600;
  box-shadow:0 12px 30px -14px rgba(35,135,74,.75);transition:background-color .3s var(--t-ease);
}
#dlg-fotovoltaica .trydan-fv__bat b{min-width:0;text-align:left;font-size:inherit;color:#fff}
#dlg-fotovoltaica .trydan-fv__bat .trydan-fv__celda{width:2.2rem;height:.8rem;padding:2px;border-color:#fff}
#dlg-fotovoltaica .trydan-fv__bat .trydan-fv__celda::after{background:#fff}
#dlg-fotovoltaica .trydan-fv__bat .trydan-fv__celda i{background:#fff}
#dlg-fotovoltaica .trydan-fv__msg{font-weight:500}
#dlg-fotovoltaica .trydan-fv__msg.es-off{display:none}
#dlg-fotovoltaica .trydan-fv__bat.es-pausa{background:#8A8A8A;box-shadow:none}
#dlg-fotovoltaica .trydan-fv__bat.es-pausa .es-on{display:none}
#dlg-fotovoltaica .trydan-fv__bat.es-pausa .es-off{display:inline}
#dlg-fotovoltaica .trydan-fv__flota .trydan-fv{width:100%}
@media(min-width:48rem){
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv__flota{
    position:absolute;right:clamp(1rem,2vw,1.75rem);bottom:clamp(1rem,2vw,1.75rem);width:min(46%,34rem);
  }
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv__flota .trydan-fv{position:static;width:100%;margin:0}
}
@media(max-width:47.999rem){
  #dlg-fotovoltaica .trydan-fv__flota{width:calc(100% - 2 * var(--t-pad));margin:-4.5rem auto 0}
  #dlg-fotovoltaica .trydan-fv__flota .trydan-fv{margin:0}
}

/* cambios de Pencil: tarjeta y pildora mas a la izquierda (se ve el coche), verde #67B84F,
   titulo de los modos en la columna izquierda encima del flujo */
@media(min-width:48rem){
  #dlg-fotovoltaica .trydan-fv__hero .trydan-fv__flota{right:18.33%;bottom:3.7rem}
}
#dlg-fotovoltaica .trydan-fv__bat{background:#67B84F;box-shadow:0 12px 30px -14px rgba(103,184,79,.75)}
#dlg-fotovoltaica .trydan-md__cab{grid-column:auto;margin-bottom:.5rem}

/* el movil, mas grande y mas real: isla dinamica, barra de estado, tipografia legible,
   barra de 24 h con iconos por tramo */
@media(min-width:48rem){#dlg-fotovoltaica .trydan-md__tarjeta{grid-template-columns:minmax(0,1fr) 18.5rem}}
#dlg-fotovoltaica .trydan-md__tel{
  max-width:18.5rem;font-size:.8rem;line-height:1.3;background:#EEEEEE;
  border:8px solid #1B1B19;border-radius:2.9rem;
  box-shadow:0 44px 60px -38px rgba(0,0,0,.55);
}
#dlg-fotovoltaica .trydan-md__tel-isla{position:absolute;z-index:2;top:.5rem;left:50%;width:4.8rem;height:1.3rem;margin-left:-2.4rem;border-radius:999px;background:#000}
#dlg-fotovoltaica .trydan-md__tel-st{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.5rem 0;height:2.5rem}
#dlg-fotovoltaica .trydan-md__tel-st b{font-size:.78rem;font-weight:700;color:#101010}
#dlg-fotovoltaica .trydan-md__tel-st span{display:flex;align-items:center;gap:.35rem}
#dlg-fotovoltaica .trydan-md__tel-cab{padding:.45rem 1rem .2rem}
#dlg-fotovoltaica .trydan-md__tel-t{font-size:.8rem;padding-right:1rem}
#dlg-fotovoltaica .trydan-md__tel-s{margin:.6rem 1rem .6rem;font-size:.68rem}
#dlg-fotovoltaica .trydan-md__tel-seg{margin:0 .75rem}
#dlg-fotovoltaica .trydan-md__tel-seg span{padding:.5rem .2rem;font-size:.56rem}
#dlg-fotovoltaica .trydan-md__tel-card{margin:.7rem .75rem 0;padding:.9rem .9rem .35rem;border-radius:1.1rem}
#dlg-fotovoltaica .trydan-md__tel-h{font-size:.98rem}
#dlg-fotovoltaica .trydan-md__tel-p{margin:.15rem 0 0;font-size:.62rem;color:#8A8A8A}
#dlg-fotovoltaica .trydan-md__tel-barra{height:1.75rem;margin:.8rem 0 .35rem}
#dlg-fotovoltaica .trydan-md__tel-barra i{display:flex;align-items:center;justify-content:center;border-radius:.55rem}
#dlg-fotovoltaica .trydan-md__tel-barra svg{display:block}
#dlg-fotovoltaica .trydan-md__tel-ejes{font-size:.56rem}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__tramo{margin:.4rem 0 0;padding:.65rem 0 .6rem;gap:.1rem .6rem}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__tn{font-size:.74rem}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__th{font-size:.64rem}
#dlg-fotovoltaica .trydan-md__tel .trydan-md__ok{width:1.05rem;height:1.05rem}
#dlg-fotovoltaica .trydan-md__tel-g{margin:.85rem .75rem 0;padding:.8rem;font-size:.78rem}
#dlg-fotovoltaica .trydan-md__tel-nav{margin:.9rem .45rem .6rem;padding:.6rem .2rem .5rem;border-radius:1.25rem}
#dlg-fotovoltaica .trydan-md__tel-nav span{font-size:.5rem;gap:.2rem}

/* menos aire entre el titular y la tarjeta blanca de los modos */
#dlg-fotovoltaica .trydan-pot__cab{padding-bottom:1.5rem}
#dlg-fotovoltaica .trydan-pot__cab + .trydan-pot__sec{padding-top:.5rem}

#dlg-fotovoltaica .trydan-md{margin-top:0}

/* ── cabecera: ticks a la izquierda y la tarjeta de la bateria a la derecha ─────────── */
#dlg-fotovoltaica .trydan-fv__cab{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:64rem){#dlg-fotovoltaica .trydan-fv__cab{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}}
#dlg-fotovoltaica .trydan-fv__ticks,#dlg-fotovoltaica .trydan-fv__tres{list-style:none;margin:0;padding:0}
#dlg-fotovoltaica .trydan-fv__ticks{margin-top:clamp(1.25rem,2.4vw,1.75rem);display:grid;gap:.85rem}
#dlg-fotovoltaica .trydan-fv__ticks li{
  position:relative;padding-left:2rem;font-size:var(--t-fs-sec);line-height:1.5;color:var(--t-body);text-wrap:pretty;
}
#dlg-fotovoltaica .trydan-fv__ticks li::before,
#dlg-fotovoltaica .trydan-fv__tres li::before{
  content:"";position:absolute;left:0;top:.05em;width:1.35rem;height:1.35rem;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23E56F00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 68% no-repeat,var(--t-acc-suave);
}
#dlg-fotovoltaica .trydan-fv__bateria{
  padding:clamp(1.25rem,2.4vw,1.75rem);background:#FEFEFD;border-radius:var(--t-r-media);
  box-shadow:0 30px 70px -44px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.04);
}
#dlg-fotovoltaica .trydan-fv__bateria-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
#dlg-fotovoltaica .trydan-fv__bateria-h{margin:0;font-size:var(--t-fs-h3);font-weight:400;line-height:1.25;letter-spacing:-.015em;color:var(--t-ink)}
#dlg-fotovoltaica .trydan-fv__sello{
  padding:.35em .9em;border-radius:999px;background:var(--t-acc-suave);color:var(--t-accent-dark);
  font-size:var(--t-fs-rot);font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
#dlg-fotovoltaica .trydan-fv__bateria-p{margin:.9rem 0 0;font-size:var(--t-fs-sec);line-height:1.6;color:var(--t-body);text-wrap:pretty}
#dlg-fotovoltaica .trydan-fv__bateria-p b{color:var(--t-ink);font-weight:600;font-variant-numeric:tabular-nums}
#dlg-fotovoltaica .trydan-fv__bateria-k{margin:1.1rem 0 .65rem;font-size:var(--t-fs-rot);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-tenue)}
#dlg-fotovoltaica .trydan-fv__bateria .trydan-kw__f{background:var(--t-sup)}
#dlg-fotovoltaica .trydan-fv__bateria .trydan-kw__r:checked+.trydan-kw__f{background:var(--t-ink)}

/* ── inversores: la ficha flota sobre el borde inferior de la foto ────────────────── */
#dlg-fotovoltaica .trydan-fv__ficha{
  position:relative;z-index:1;width:92%;margin:calc(clamp(3rem,6vw,4.5rem) * -1) auto 0;
  padding:clamp(1.25rem,2.4vw,2rem);
  background:rgba(255,255,255,.9);border-radius:var(--t-r-media);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.04);
}
#dlg-fotovoltaica .trydan-fv__ficha .trydan-fv__tres{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem 2rem}
@media(min-width:48rem){#dlg-fotovoltaica .trydan-fv__ficha .trydan-fv__tres{grid-template-columns:repeat(3,minmax(0,1fr))}}
#dlg-fotovoltaica .trydan-fv__ficha .trydan-fv__tres li{position:relative;padding:0 0 0 2rem;border-top:0;display:block}
#dlg-fotovoltaica .trydan-fv__ficha .trydan-fv__tres h4{margin:0 0 .35rem}
#dlg-fotovoltaica .trydan-fv__marcas{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;
  margin-top:clamp(1.1rem,2vw,1.5rem);padding-top:clamp(1.1rem,2vw,1.5rem);border-top:1px solid var(--t-linea);
}
#dlg-fotovoltaica .trydan-fv__marcas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.75rem}
#dlg-fotovoltaica .trydan-fv__marcas li{font-size:var(--t-fs-p);font-weight:600;letter-spacing:-.01em;color:var(--t-ink)}
#dlg-fotovoltaica .trydan-fv__ficha .trydan-fv__nota{margin:1rem 0 0}
@media(max-width:47.999rem){#dlg-fotovoltaica .trydan-fv__ficha{width:100%;margin-top:-2.5rem}}

/* ═══ LA IA DE V2C · la demo de peticiones ═══════════════════════════════
   Sustituye a «Pregunta a V2C IA» y a EcoCharging. Contenido del archivo
   «Ahorro IA v3 - compartir», rehecho con el sistema de la pagina: fondo claro,
   tinta oscura, una sola nota de color y el mismo ritmo de las demas secciones.
   Todo el texto esta en el marcado; el JS solo escribe a maquina y cambia de
   peticion. */
.trydan-ia2{
  background:var(--t-sup,#F5F4F2);
  padding-inline:var(--t-gutter-sec);
  padding-block:clamp(3.5rem,8vw,9rem);
  --ia-tinta:var(--t-ink,#2E2E2A);
}
.trydan-ia2>.wp-block-group__inner-container{
  display:flex;flex-direction:column;gap:clamp(2rem,4vw,4rem);
}

/* cabecera: titular a la izquierda, entradilla a la derecha */
.trydan-ia2__cab>.wp-block-group__inner-container{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.25rem,2.4vw,2rem);align-items:end;
}
@media(min-width:64rem){
  .trydan-ia2__cab>.wp-block-group__inner-container{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(3rem,6vw,7rem)}
}
.trydan-lp .trydan-ia2 .trydan-h2{max-width:14ch}
.trydan-lp .trydan-ia2__suave{color:var(--t-tenue)}
.trydan-lp .trydan-ia2__lead{margin:0;max-width:44ch}

/* la demo: lista a la izquierda, pantalla a la derecha */
.trydan-ia2__demo{
  display:grid;grid-template-columns:minmax(0,1fr);
  background:#fff;border-radius:var(--t-r-media);
  box-shadow:0 30px 80px -50px rgba(0,0,0,.35);overflow:hidden;
}
@media(min-width:64rem){
  .trydan-ia2__demo{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}
}
.trydan-ia2__lista{
  padding:clamp(1.25rem,2.6vw,2.25rem);background:var(--t-sup,#F5F4F2);
  display:flex;flex-direction:column;gap:1rem;
}
.trydan-lp .trydan-ia2__lk{
  margin:0;font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-tenue);
}
.trydan-ia2__tabs{display:flex;flex-direction:column;gap:.25rem}
.trydan-lp button.trydan-ia2__tab{
  display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.5rem;align-items:baseline;
  width:100%;margin:0;padding:.95rem 1rem;text-align:left;cursor:pointer;
  font-family:inherit;letter-spacing:normal;text-transform:none;text-shadow:none;
  background:transparent;border:1px solid transparent;border-radius:12px;color:var(--t-body);
  transition:background-color .25s var(--t-ease),border-color .25s var(--t-ease),color .25s var(--t-ease);
}
.trydan-lp button.trydan-ia2__tab:hover{background:rgba(255,255,255,.7)}
.trydan-lp button.trydan-ia2__tab.is-on{background:#fff;border-color:var(--ia-tinta);color:var(--ia-tinta)}
.trydan-lp button.trydan-ia2__tab:focus-visible{outline:2px solid var(--t-accent-dark);outline-offset:2px}
.trydan-ia2__n{font-size:.75rem;font-weight:500;letter-spacing:.04em;color:var(--t-hover);font-variant-numeric:tabular-nums}
.trydan-ia2__tab.is-on .trydan-ia2__n{color:var(--t-accent-dark)}
.trydan-ia2__tx{font-size:var(--t-fs-p);line-height:1.4}
.trydan-ia2__tab.is-on .trydan-ia2__tx{font-weight:600}
.trydan-lp .trydan-ia2__ej{margin:auto 0 0;padding-top:.75rem;font-size:var(--t-fs-rot,.75rem);color:var(--t-tenue)}

/* la pantalla */
.trydan-ia2__pantalla{padding:clamp(1.5rem,3.4vw,3rem);min-height:26rem;display:flex}
.trydan-ia2__p{display:flex;flex-direction:column;gap:clamp(1.25rem,2.4vw,2rem);width:100%}
.trydan-ia2__p[hidden]{display:none}
.trydan-ia2__ask{
  display:flex;align-items:center;gap:1rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--t-linea);
}
.trydan-ia2__q{font-size:var(--t-fs-h3,1.25rem);font-weight:400;line-height:1.35;color:var(--t-ink)}
.trydan-ia2__caret{flex:none;width:.55rem;height:2px;background:var(--t-ink);display:none}
.trydan-ia2__demo.is-escribe .trydan-ia2__caret{display:block;animation:trydan-ia2-caret 1s step-end infinite}
@keyframes trydan-ia2-caret{0%,45%{opacity:1}46%,100%{opacity:0}}
.trydan-ia2__st{
  margin-left:auto;flex:none;
  font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-hover);
  transition:color .3s var(--t-ease);
}
.trydan-ia2__demo.is-listo .trydan-ia2__st{color:var(--t-ink)}
.trydan-ia2__res{display:flex;flex-direction:column;gap:clamp(.9rem,1.6vw,1.25rem);flex:1}
.trydan-ia2__demo.is-oculto .trydan-ia2__res{opacity:0;transform:translateY(8px)}
.trydan-ia2__res{transition:opacity .45s var(--t-ease),transform .45s var(--t-ease)}
@media(prefers-reduced-motion:reduce){.trydan-ia2__res{transition:none}}
.trydan-lp .trydan-ia2__rt{margin:0;font-size:clamp(1.25rem,1.1rem + .6vw,1.75rem);font-weight:400;line-height:1.25;letter-spacing:-.01em;color:var(--t-ink)}
.trydan-lp .trydan-ia2__rp{margin:0;max-width:52ch;font-size:var(--t-fs-p);line-height:1.6;color:var(--t-body);text-wrap:pretty}

.trydan-ia2__campos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:.5rem 0 0;
  border-top:1px solid var(--t-linea);
}
.trydan-ia2__campos>div{padding:1.1rem 1rem 1.1rem 0}
.trydan-ia2__campos>div+div{padding-left:1.25rem;border-left:1px solid var(--t-linea)}
.trydan-ia2__campos dt{margin:0 0 .5rem;font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-tenue)}
.trydan-ia2__campos dd{margin:0;font-size:clamp(1.0625rem,.9rem + .55vw,1.4rem);font-weight:300;line-height:1.2;color:var(--t-ink)}

/* la grafica de precios: 24 barras, las cinco mas baratas en oscuro */
.trydan-ia2__graf{margin-top:.5rem}
.trydan-ia2__horas{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;
  height:8.5rem;align-items:end;
}
.trydan-ia2__horas li{position:relative;height:100%;display:flex;align-items:flex-end}
.trydan-ia2__horas i{display:block;width:100%;height:var(--h);border-radius:2px 2px 0 0;background:var(--t-linea);transition:background-color .35s var(--t-ease)}
.trydan-ia2__horas .is-on i{background:var(--t-accent)}
.trydan-ia2__horas span{
  position:absolute;left:0;right:0;top:100%;margin-top:.4rem;text-align:center;
  font-size:.625rem;letter-spacing:.06em;color:var(--t-tenue);font-variant-numeric:tabular-nums;
}
.trydan-lp .trydan-ia2__vent{margin:2.1rem 0 0;font-size:var(--t-fs-sec);font-weight:600;color:var(--t-accent-dark);font-variant-numeric:tabular-nums}

.trydan-lp .trydan-ia2__hecho{
  display:flex;align-items:center;gap:.6rem;margin:auto 0 0;padding-top:1.1rem;border-top:1px solid var(--t-linea);
  font-size:var(--t-fs-sec);color:var(--t-ink);
}
.trydan-ia2__hecho i{flex:none;width:.4rem;height:.4rem;border-radius:999px;background:var(--t-accent)}
.trydan-ia2__demo:not(.is-listo) .trydan-ia2__hecho i{background:var(--t-hover)}

/* los tres cierres */
.trydan-ia2__cierres{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);
}
@media(min-width:48rem){.trydan-ia2__cierres{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trydan-ia2__cierres li{padding-top:1.25rem;border-top:2px solid var(--t-ink)}
.trydan-lp .trydan-ia2__ct{margin:0 0 .6rem;font-size:var(--t-fs-p);font-weight:600;line-height:1.3;color:var(--t-ink)}
.trydan-ia2__cierres p{margin:0;font-size:var(--t-fs-sec);line-height:1.6;color:var(--t-body);text-wrap:pretty}
.trydan-lp .trydan-ia2__pie{margin:0;max-width:60ch;font-size:var(--t-fs-p);line-height:1.6;color:var(--t-tenue);text-wrap:pretty}

@media(max-width:63.999rem){
  .trydan-ia2__pantalla{min-height:0}
  .trydan-ia2__campos{grid-template-columns:minmax(0,1fr)}
  .trydan-ia2__campos>div,.trydan-ia2__campos>div+div{padding:.9rem 0;border-left:0}
  .trydan-ia2__campos>div+div{border-top:1px solid var(--t-linea)}
  .trydan-ia2__ask{flex-wrap:wrap}
}
@media(max-width:47.999rem){
  .trydan-lp .trydan-fv__ejex span:nth-child(even){display:none}
}

/* ═══ APP V2C GRATUITA · carrusel de moviles dibujados con codigo ═══════════
   Seis pantallas maquetadas con HTML y CSS (no son capturas): el texto de
   dentro se traduce con la pagina y las cifras se mueven con @property, sin JS.
   Fuera de Chrome/Safari/Firefox recientes las cifras se quedan quietas en su
   valor inicial; la pantalla se lee igual. */
@property --t-amp{syntax:"<integer>";inherits:true;initial-value:16}
@property --t-kwh{syntax:"<integer>";inherits:true;initial-value:18}
@property --t-eur{syntax:"<integer>";inherits:true;initial-value:4}
@property --t-cts{syntax:"<integer>";inherits:true;initial-value:86}
@property --t-obj{syntax:"<integer>";inherits:true;initial-value:14}
@property --t-bat{syntax:"<integer>";inherits:true;initial-value:64}

.trydan-app2{
  background:#fff;overflow:hidden;
  padding-block:clamp(3.5rem,8vw,9rem);
  padding-left:var(--t-gutter-sec);padding-right:0;
}
.trydan-app2>.wp-block-group__inner-container{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3rem);align-items:center;
}
@media(min-width:64rem){
  .trydan-app2>.wp-block-group__inner-container{
    grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(2.5rem,5vw,6rem);
  }
}
.trydan-app2__txt{padding-right:var(--t-gutter-sec)}
@media(min-width:64rem){.trydan-app2__txt{padding-right:0}}
.trydan-lp .trydan-app2 .trydan-h2{max-width:11ch}
.trydan-lp .trydan-app2 .trydan-body{max-width:34ch}
.trydan-app2__flechas{display:flex;gap:.6rem;margin-top:clamp(1.25rem,2.4vw,2rem)}
.trydan-lp button.trydan-app2__fl{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;margin:0;
  border-radius:999px;border:1px solid var(--t-hover);background:#fff;color:var(--t-ink);cursor:pointer;
  transition:background-color .25s var(--t-ease),border-color .25s var(--t-ease),opacity .25s var(--t-ease);
}
.trydan-lp button.trydan-app2__fl:hover{background:var(--t-ink);border-color:var(--t-ink);color:#fff}
.trydan-lp button.trydan-app2__fl:focus-visible{outline:2px solid var(--t-accent-dark);outline-offset:3px}
.trydan-lp button.trydan-app2__fl[disabled]{opacity:.35;pointer-events:none}
.trydan-lp .trydan-app2__ej{margin:clamp(1rem,2vw,1.5rem) 0 0;font-size:var(--t-fs-rot,.75rem);color:var(--t-tenue)}

.trydan-app2__pista{
  list-style:none;margin:0;display:flex;gap:clamp(1.25rem,2.4vw,2.25rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;
  padding:1rem var(--t-gutter-sec) 2rem 0;scrollbar-width:none;
}
.trydan-app2__pista::-webkit-scrollbar{display:none}
.trydan-app2__pista:focus-visible{outline:2px solid var(--t-accent-dark);outline-offset:4px;border-radius:12px}
.trydan-app2__it{flex:none;width:clamp(12.75rem,17vw,15rem);scroll-snap-align:start}
.trydan-lp .trydan-app2__pie{
  margin:1.1rem .25rem 0;font-size:var(--t-fs-sec);line-height:1.45;color:var(--t-body);text-wrap:balance;
}

/* el movil */
.trydan-tel{
  position:relative;aspect-ratio:9 / 18.6;padding:.5rem;
  border-radius:2.4rem;background:#161616;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.5),inset 0 0 0 2px #2c2c2c;
}
.trydan-tel__isla{
  position:absolute;z-index:2;top:.95rem;left:50%;transform:translateX(-50%);
  width:4.1rem;height:1.15rem;border-radius:999px;background:#0b0b0b;
}
.trydan-tel__pantalla{
  height:100%;border-radius:1.95rem;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;font-size:.8125rem;color:var(--t-ink);
}
.trydan-tel__cab{
  display:flex;align-items:center;gap:.5rem;padding:2.5rem .9rem .6rem;
  border-bottom:1px solid var(--t-linea);
}
.trydan-tel__cab b{flex:1;text-align:center;font-size:.8125rem;font-weight:600}
.trydan-tel__atras{width:.55rem;height:.55rem;border-left:2px solid var(--t-body);border-bottom:2px solid var(--t-body);transform:rotate(45deg)}
.trydan-tel__pto{width:.9rem;height:.2rem;border-radius:999px;background:var(--t-hover)}
.trydan-tel__cuerpo{flex:1;display:flex;flex-direction:column;padding:1rem .9rem 1.1rem;gap:.7rem;min-height:0}
.trydan-tel__cuerpo.es-centro{align-items:center;text-align:center;justify-content:center;gap:.6rem}
.trydan-tel__et{margin:0;font-size:.875rem;font-weight:600}
.trydan-tel__sub{margin:0;font-size:.75rem;line-height:1.35;color:var(--t-tenue)}
.trydan-tel__btn{
  margin-top:.5rem;padding:.6rem 1.3rem;border-radius:999px;background:var(--t-ink);color:#fff;
  font-size:.75rem;font-weight:600;
}
.trydan-tel__btn.es-claro{background:var(--t-sup);color:var(--t-ink)}
.trydan-tel__n::before{font-variant-numeric:tabular-nums}

/* el anillo: intensidad y kWh */
.trydan-tel__anillo{
  position:relative;width:8.5rem;aspect-ratio:1;border-radius:50%;
  display:flex;align-items:baseline;justify-content:center;gap:.2rem;padding-top:2.9rem;
  background:conic-gradient(var(--t-accent) calc(var(--t-amp) / 32 * 360deg),var(--t-linea) 0);
}
.trydan-tel__anillo::before{content:"";position:absolute;inset:.55rem;border-radius:50%;background:#fff}
.trydan-tel__anillo.es-kwh{background:conic-gradient(var(--t-accent) calc(var(--t-obj) / 20 * 360deg),var(--t-linea) 0)}
.trydan-tel__anillo>*{position:relative}
.trydan-tel__anillo .trydan-tel__n{font-size:2.1rem;font-weight:300;letter-spacing:-.02em;line-height:1}
.trydan-tel__anillo small{font-size:.75rem;font-weight:600;color:var(--t-tenue)}
[data-c="amp"]{counter-reset:ca var(--t-amp)}
[data-c="amp"]::before{content:counter(ca)}
[data-c="kwh"]{counter-reset:ck var(--t-kwh)}
[data-c="kwh"]::before{content:counter(ck)}
[data-c="eur"]{counter-reset:ce var(--t-eur) cc var(--t-cts)}
[data-c="eur"]::before{content:counter(ce) "," counter(cc,decimal-leading-zero)}
[data-c="obj"]{counter-reset:co var(--t-obj)}
[data-c="obj"]::before{content:counter(co)}
[data-c="bat"]{counter-reset:cb var(--t-bat)}
[data-c="bat"]::before{content:counter(cb)}

.trydan-tel__riel{position:relative;align-self:stretch;height:.3rem;margin:.5rem .4rem .2rem;border-radius:999px;background:var(--t-linea)}
.trydan-tel__riel i{display:block;height:100%;border-radius:inherit;background:var(--t-accent);width:calc(var(--t-amp) / 32 * 100%)}
.trydan-tel__riel i::after{
  content:"";position:absolute;top:50%;left:calc(var(--t-amp) / 32 * 100%);width:1.05rem;height:1.05rem;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:3px solid var(--t-ink);
}
.trydan-tel__riel.es-fijo i{width:50%}
.trydan-tel__riel.es-fijo i::after{left:50%}

/* flujo */
.trydan-tel__nodo{
  display:flex;flex-direction:column;gap:.1rem;padding:.7rem .8rem;border-radius:14px;background:var(--t-sup);
}
.trydan-tel__nodo span{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t-tenue)}
.trydan-tel__nodo b{font-size:1rem;font-weight:600}
.trydan-tel__nodo.es-sol{background:var(--t-acc-suave)}
.trydan-tel__nodo.es-sol b,.trydan-tel__nodo.es-co b{color:var(--t-accent-dark)}
.trydan-tel__par{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.trydan-tel__hilos{display:grid;grid-template-columns:1fr 1fr;height:2.2rem}
.trydan-tel__hilos i{
  justify-self:center;width:3px;height:100%;
  background:repeating-linear-gradient(to bottom,var(--t-accent) 0 .3rem,transparent .3rem .75rem);
  background-size:3px .75rem;
}
.trydan-tel__red{display:flex;align-items:center;gap:.5rem;margin:auto 0 0;font-size:.75rem;color:var(--t-tenue)}
.trydan-tel__red i{width:.5rem;height:.5rem;border-radius:50%;background:var(--t-hover)}

/* consumo */
.trydan-tel__cifras{display:flex;gap:1rem;align-items:flex-end}
.trydan-tel__cifras>div{display:flex;align-items:baseline;gap:.2rem}
.trydan-tel__cifras .trydan-tel__n{font-size:1.65rem;font-weight:300;letter-spacing:-.02em;line-height:1}
.trydan-tel__cifras small{font-size:.75rem;font-weight:600;color:var(--t-tenue)}
.trydan-tel__cifras .es-coste .trydan-tel__n{color:var(--t-accent-dark)}
.trydan-tel__barras{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;align-items:end;height:6.5rem;margin-top:.4rem}
.trydan-tel__barras i{display:block;height:var(--h);border-radius:4px 4px 0 0;background:var(--t-linea);transform-origin:bottom}
.trydan-tel__barras i:nth-child(6){background:var(--t-accent)}
.trydan-tel__dias{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;text-align:center;font-size:.625rem;color:var(--t-tenue)}

/* bateria */
.trydan-tel__bat{
  position:relative;width:5.4rem;height:8.4rem;border-radius:1rem;border:3px solid var(--t-ink);overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:.1rem;margin-top:.4rem;
}
.trydan-tel__bat::before{
  content:"";position:absolute;z-index:2;top:-3px;left:50%;transform:translateX(-50%);width:1.8rem;height:.35rem;
  background:var(--t-ink);border-radius:0 0 4px 4px;
}
.trydan-tel__nivel{
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--t-bat) * 1%);
  background:linear-gradient(to top,var(--t-accent),#F4B26B);
}
.trydan-tel__bat .trydan-tel__n,.trydan-tel__bat small{position:relative;z-index:1}
.trydan-tel__bat .trydan-tel__n{font-size:1.5rem;font-weight:500}
.trydan-tel__bat small{font-size:.75rem;font-weight:600}
.trydan-tel__conm{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.75rem;font-weight:600}
.trydan-tel__conm i{position:relative;width:2rem;height:1.1rem;border-radius:999px;background:var(--t-accent)}
.trydan-tel__conm i::after{content:"";position:absolute;top:2px;right:2px;width:.9rem;height:.9rem;border-radius:50%;background:#fff}

/* smartlock */
.trydan-tel__cerrojo{width:5.5rem;height:5.5rem;border-radius:50%;display:grid;place-items:center;background:var(--t-sup);color:var(--t-ink)}
.trydan-tel__cerrojo svg{width:3rem;height:3rem}
.trydan-tel__estado{position:relative;margin:0;height:1.3rem;width:100%;font-size:1rem;font-weight:600}
.trydan-tel__estado span{position:absolute;inset:0}
.trydan-tel__estado .es-b{opacity:0;color:var(--t-accent-dark)}

/* animaciones: solo con movimiento permitido */
@media(prefers-reduced-motion:no-preference){
  @keyframes t-amp{from{--t-amp:8}to{--t-amp:32}}
  @keyframes t-cons{0%{--t-kwh:0;--t-eur:0;--t-cts:0}70%,100%{--t-kwh:18;--t-eur:4;--t-cts:86}}
  @keyframes t-obj{0%{--t-obj:0}75%,100%{--t-obj:20}}
  @keyframes t-bat{from{--t-bat:20}to{--t-bat:82}}
  @keyframes t-bar{0%{transform:scaleY(0)}30%,100%{transform:scaleY(1)}}
  @keyframes t-hilo{to{background-position:0 .75rem}}
  @keyframes t-arco{0%,42%{transform:none}50%,92%{transform:translate(8px,-7px) rotate(28deg)}100%{transform:none}}
  @keyframes t-ea{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
  @keyframes t-eb{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
  .trydan-tel__pantalla:has([data-c="amp"]){animation:t-amp 4.5s ease-in-out infinite alternate}
  .trydan-tel__pantalla:has([data-c="eur"]){animation:t-cons 5s ease-out infinite}
  .trydan-tel__pantalla:has([data-c="obj"]){animation:t-obj 5s ease-out infinite}
  .trydan-tel__pantalla:has([data-c="bat"]){animation:t-bat 5s ease-in-out infinite alternate}
  .trydan-tel__barras i{animation:t-bar 5s ease-out infinite}
  .trydan-tel__barras i:nth-child(2){animation-delay:.08s}
  .trydan-tel__barras i:nth-child(3){animation-delay:.16s}
  .trydan-tel__barras i:nth-child(4){animation-delay:.24s}
  .trydan-tel__barras i:nth-child(5){animation-delay:.32s}
  .trydan-tel__barras i:nth-child(6){animation-delay:.4s}
  .trydan-tel__barras i:nth-child(7){animation-delay:.48s}
  .trydan-tel__hilos i{animation:t-hilo 1s linear infinite}
  .trydan-tel__cerrojo .es-arco{transform-box:fill-box;transform-origin:left bottom;animation:t-arco 5s ease-in-out infinite}
  .trydan-tel__estado .es-a{animation:t-ea 5s ease-in-out infinite}
  .trydan-tel__estado .es-b{animation:t-eb 5s ease-in-out infinite}
}

.trydan-tel__lista{list-style:none;margin:.2rem 0 0;padding:0;display:grid}
.trydan-tel__lista li{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:baseline;padding:.55rem 0;border-top:1px solid var(--t-linea);font-size:.75rem}
.trydan-tel__lista span{color:var(--t-tenue)}
.trydan-tel__lista b{font-weight:600}
.trydan-tel__lista em{font-style:normal;font-weight:600;color:var(--t-accent-dark);min-width:3.2rem;text-align:right}
.trydan-tel__cuerpo.es-flujo{justify-content:center}

/* ═══ ECOSISTEMA V2C · cuatro plataformas en ventanas de codigo ═════════════
   Mismo carrusel que el de la app (la pista y las flechas son las de
   .trydan-app2). Cada ventana es HTML y CSS: se traduce y se mueve sola. */
@property --t-w-kwh{syntax:"<integer>";inherits:true;initial-value:12}
@property --t-w-ing{syntax:"<integer>";inherits:true;initial-value:148}
@property --t-w-ingc{syntax:"<integer>";inherits:true;initial-value:60}
@property --t-w-on{syntax:"<integer>";inherits:true;initial-value:12}

.trydan-eco2{
  background:var(--t-sup,#F5F4F2);overflow:hidden;
  padding-block:clamp(3.5rem,8vw,9rem);
  padding-left:var(--t-gutter-sec);padding-right:0;
}
.trydan-eco2>.wp-block-group__inner-container{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.5rem)}
.trydan-eco2__cab{padding-right:var(--t-gutter-sec)}
.trydan-lp .trydan-eco2 .trydan-h2{max-width:none}
.trydan-lp .trydan-eco2 .trydan-body{max-width:52ch}
.trydan-eco2__pista{padding:.5rem var(--t-gutter-sec) 1.5rem 0}
.trydan-eco2__it{flex:none;width:clamp(19rem,38vw,34rem);scroll-snap-align:start}
.trydan-lp .trydan-eco2__pie{
  margin:1.25rem .25rem 0;max-width:40ch;font-size:var(--t-fs-sec);line-height:1.55;color:var(--t-body);text-wrap:pretty;
}
.trydan-eco2__pie b{color:var(--t-ink);font-weight:600}
.trydan-eco2__flechas{margin-top:.5rem}
.trydan-eco2__ventana>.trydan-app2__ej{margin-top:1.25rem}

/* la ventana */
.trydan-win{
  aspect-ratio:16 / 10;border-radius:1.4rem;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;font-size:clamp(.625rem,.55rem + .25vw,.8125rem);color:var(--t-ink);
  box-shadow:0 30px 70px -45px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);
}
.trydan-win__barra{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:#EFEDEA}
.trydan-win__barra i{width:.6rem;height:.6rem;border-radius:50%;background:#CFCCC6}
.trydan-win__url{margin-left:.6rem;padding:.2rem .9rem;border-radius:999px;background:#fff;color:var(--t-tenue);font-size:.85em}
.trydan-win__cuerpo{flex:1;display:flex;min-height:0}
.trydan-win__riel{display:flex;flex-direction:column;gap:.7rem;padding:1rem .8rem;border-right:1px solid var(--t-linea);background:var(--t-sup)}
.trydan-win__riel i{display:block;width:1.3rem;height:1.3rem;border-radius:.4rem;background:var(--t-linea)}
.trydan-win__riel i.es-on{background:var(--t-accent)}
.trydan-win__main{flex:1;min-width:0;padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.9rem}
.trydan-win__h{margin:0;font-size:1.05em;font-weight:600}
.trydan-win__cab{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.trydan-win__fila3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.trydan-win__tile{display:flex;flex-direction:column;gap:.25rem;padding:.7rem .8rem;border-radius:.8rem;background:var(--t-sup)}
.trydan-win__tile span{font-size:.8em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t-tenue)}
.trydan-win__tile b{font-size:1.15em;font-weight:600;font-variant-numeric:tabular-nums}
.trydan-win__tile .es-estado{display:flex;align-items:center;gap:.4rem;color:var(--t-accent-dark)}
.trydan-win__tile .es-estado i{width:.5rem;height:.5rem;border-radius:50%;background:var(--t-accent)}
.trydan-win__graf{width:100%;flex:1;min-height:0}
.trydan-win__graf .es-area{fill:var(--t-accent);fill-opacity:.16}
.trydan-win__graf .es-linea{fill:none;stroke:var(--t-accent);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.trydan-win__gran{margin:0;font-size:2.6em;font-weight:300;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.trydan-win__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.trydan-win__lista li{
  display:grid;align-items:center;gap:.7rem;padding:.6rem 0;border-top:1px solid var(--t-linea);
}
.trydan-win__lista.es-pagos li{grid-template-columns:auto 1fr auto}
.trydan-win__lista.es-tabla li{grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr) auto}
.trydan-win__lista.es-inst li{grid-template-columns:auto 1fr auto}
.trydan-win__lista b{font-weight:600;font-variant-numeric:tabular-nums}
.trydan-win__lista.es-pagos b{color:var(--t-accent-dark)}
.trydan-win__lista span{color:var(--t-body)}
.es-av{display:block;width:1.5rem;height:1.5rem;border-radius:50%;background:linear-gradient(135deg,#F4C48E,var(--t-accent))}
.trydan-win__lista.es-tabla u{display:block;height:.45rem;border-radius:999px;background:var(--t-linea);text-decoration:none;overflow:hidden}
.trydan-win__lista.es-tabla s{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--t-ink);text-decoration:none}
.trydan-win__lista.es-tabla b{font-size:.85em;padding:.25rem .6rem;border-radius:999px}
.trydan-win__lista .es-ok{background:var(--t-acc-suave);color:var(--t-accent-dark)}
.trydan-win__lista .es-pen{background:var(--t-sup);color:var(--t-tenue)}
.es-punto{display:block;width:.65rem;height:.65rem;border-radius:50%;background:#3C9D5B}
.es-punto.es-ambar{background:var(--t-accent)}
.trydan-win__chip{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .8rem;border-radius:999px;background:var(--t-sup);font-weight:600;font-size:.9em}
.trydan-win__chip i{width:.5rem;height:.5rem;border-radius:50%;background:#3C9D5B}
[data-w="kwh"]{font-style:normal;counter-reset:wk var(--t-w-kwh)}
[data-w="kwh"]::before{content:counter(wk)}
[data-w="ing"]{font-style:normal;counter-reset:wi var(--t-w-ing) wc var(--t-w-ingc)}
[data-w="ing"]::before{content:counter(wi) "," counter(wc,decimal-leading-zero)}
[data-w="on"]{font-style:normal;counter-reset:wo var(--t-w-on)}
[data-w="on"]::before{content:counter(wo)}

@media(prefers-reduced-motion:no-preference){
  @keyframes w-kwh{0%{--t-w-kwh:0}70%,100%{--t-w-kwh:12}}
  @keyframes w-ing{0%{--t-w-ing:0;--t-w-ingc:0}70%,100%{--t-w-ing:148;--t-w-ingc:60}}
  @keyframes w-on{0%{--t-w-on:0}60%,100%{--t-w-on:12}}
  @keyframes w-pulso{0%,100%{opacity:1}50%{opacity:.35}}
  @keyframes w-dibuja{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes w-entra{0%,8%{opacity:0;transform:translateY(8px)}22%,92%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes w-llena{0%{width:0}60%,100%{width:var(--w)}}
  .trydan-win__cuerpo:has([data-w="kwh"]){animation:w-kwh 6s ease-out infinite}
  .trydan-win__cuerpo:has([data-w="ing"]){animation:w-ing 6s ease-out infinite}
  .trydan-win__cuerpo:has([data-w="on"]){animation:w-on 6s ease-out infinite}
  .trydan-win__tile .es-estado i,.es-punto,.trydan-win__chip i{animation:w-pulso 1.8s ease-in-out infinite}
  .trydan-win__graf .es-linea{stroke-dasharray:1;stroke-dashoffset:1;animation:w-dibuja 5s ease-out infinite}
  .trydan-win__lista.es-pagos li{animation:w-entra 6s ease-out infinite}
  .trydan-win__lista.es-pagos li:nth-child(2){animation-delay:.7s}
  .trydan-win__lista.es-pagos li:nth-child(3){animation-delay:1.4s}
  .trydan-win__lista.es-tabla s{animation:w-llena 5s ease-out infinite}
  .trydan-win__lista.es-tabla li:nth-child(2) s{animation-delay:.15s}
  .trydan-win__lista.es-tabla li:nth-child(3) s{animation-delay:.3s}
  .trydan-win__lista.es-tabla li:nth-child(4) s{animation-delay:.45s}
}

/* ═══ EXPLORA TRYDAN · foto grande y siete botones ═══════════════════════════
   Al estilo del explorador de producto de Apple: la foto cambia y el boton
   activo se abre en una burbuja con su texto. Los siete cuadros de foto que
   aun no existen son marcadores («Foto pendiente»): cuando llegue cada foto, se
   cambia el div .trydan-exp__ph por un <img> dentro del mismo <figure>. */
.trydan-exp-sec{
  background:#fff;
  padding-inline:var(--t-gutter-sec);
  padding-block:clamp(3.5rem,8vw,9rem);
}
.trydan-exp-sec>.wp-block-group__inner-container{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.5rem)}
.trydan-lp .trydan-exp-sec .trydan-h2{max-width:none}

.trydan-exp__escena{
  position:relative;aspect-ratio:1200 / 620;border-radius:clamp(1.25rem,2.4vw,1.75rem);
  overflow:hidden;background:#101010;isolation:isolate;
}
.trydan-exp__slide{
  position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s var(--t-ease);
}
.trydan-exp__slide.is-on{opacity:1}
.trydan-exp__slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%;user-select:none;-webkit-user-drag:none}
.trydan-exp__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.5rem;
  padding:0 clamp(1.5rem,6vw,6rem);text-align:right;color:#8E8C87;
  background:radial-gradient(70% 90% at 78% 50%,#2c2b28,#141413 70%);
}
.trydan-exp__ph svg{color:#5d5b56}
.trydan-exp__ph b{font-size:var(--t-fs-rot,.75rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#E56F00}
.trydan-exp__ph span{max-width:26ch;font-size:var(--t-fs-sec);line-height:1.5}

/* los botones, encima de la foto y a la izquierda */
.trydan-exp__ui{
  position:absolute;z-index:2;left:clamp(.75rem,2.4vw,2rem);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.1rem);
}
.trydan-exp__nav{display:flex;flex-direction:column;gap:.5rem}
.trydan-lp button.trydan-exp__fl{
  display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;margin:0;border:0;border-radius:50%;
  background:rgba(40,40,38,.82);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .25s var(--t-ease);
}
.trydan-lp button.trydan-exp__fl:hover{background:#000}
.trydan-lp button.trydan-exp__fl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.trydan-exp__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.trydan-lp button.trydan-exp__b{
  display:inline-flex;align-items:center;gap:.65rem;margin:0;padding:.65rem 1.1rem .65rem .7rem;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(40,40,38,.82);color:#fff;
  font-family:inherit;font-size:var(--t-fs-sec);font-weight:600;letter-spacing:normal;text-transform:none;text-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background-color .25s var(--t-ease);
}
.trydan-lp button.trydan-exp__b:hover{background:rgba(0,0,0,.92)}
.trydan-lp button.trydan-exp__b:focus-visible{outline:2px solid #fff;outline-offset:3px}
.trydan-exp__mas{
  position:relative;flex:none;width:1.4rem;height:1.4rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);
}
.trydan-exp__mas::before,.trydan-exp__mas::after{
  content:"";position:absolute;left:50%;top:50%;width:.6rem;height:1.5px;background:#fff;transform:translate(-50%,-50%);
}
.trydan-exp__mas::after{transform:translate(-50%,-50%) rotate(90deg)}

/* la burbuja: ocupa el sitio del boton activo */
.trydan-exp__burbuja{
  display:none;max-width:22rem;padding:1rem 1.25rem;border-radius:1.25rem;
  background:rgba(40,40,38,.9);color:#EDEBE7;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:var(--t-fs-sec);line-height:1.5;text-wrap:pretty;
}
.trydan-exp__burbuja b{color:#fff;font-weight:700}
.trydan-exp__it.is-on .trydan-exp__b{display:none}
.trydan-exp__it.is-on .trydan-exp__burbuja{display:block;animation:trydan-exp-entra .45s var(--t-ease) both}
@keyframes trydan-exp-entra{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .trydan-exp__slide{transition:none}
  .trydan-exp__it.is-on .trydan-exp__burbuja{animation:none}
}

/* movil: la foto arriba y los botones debajo, en una columna */
@media(max-width:47.999rem){
  .trydan-exp__escena{aspect-ratio:auto;display:flex;flex-direction:column;background:#101010}
  .trydan-exp__slide{position:relative;inset:auto;aspect-ratio:4 / 3;display:none;opacity:1}
  .trydan-exp__slide.is-on{display:block}
  .trydan-exp__slide img{object-position:75% 50%}
  .trydan-exp__ph{align-items:center;text-align:center;padding:1.5rem}
  .trydan-exp__ui{position:static;transform:none;padding:1rem;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-start}
  .trydan-exp__nav{flex-direction:row;margin-left:auto}
  .trydan-exp__lista{flex:1;min-width:0}
  .trydan-exp__burbuja{max-width:none}
}

/* ═══ EXPLORA · VIDEO DE FONDO (23/10) ═══
   En reposo se ve el video de producto; al abrir un boton entra su foto encima. */
.trydan-exp__video{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s var(--t-ease);background:#000}
.trydan-exp__video.is-on{opacity:1}
.trydan-exp__video video{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
@media(prefers-reduced-motion:reduce){.trydan-exp__video{transition:none}}
@media(max-width:47.999rem){
  .trydan-exp__video{position:relative;inset:auto;aspect-ratio:4 / 3;display:none;opacity:1}
  .trydan-exp__video.is-on{display:block}
}
/* ═══ FIN EXPLORA · VIDEO DE FONDO ═══ */

/* ═══ APP V2C · PANTALLAS REALES (v2, generado por build_app.py) ═══ */
@property --ap-t{syntax:"<number>";inherits:true;initial-value:0}
@property --ap-u{syntax:"<number>";inherits:true;initial-value:1}
@property --ap-x{syntax:"<number>";inherits:true;initial-value:.5556}
@property --ap-soc{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-e{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-ei{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-ef{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-c{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-ci{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-cf{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-m{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-r{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-ses{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-a{syntax:"<integer>";inherits:true;initial-value:0}
@property --ap-cd{syntax:"<integer>";inherits:true;initial-value:80}
.ap-sprite{position:absolute;width:0;height:0;overflow:hidden}
.trydan-tel .trydan-tel__pantalla{container-type:size;background:#F1F1F1}
.ap{position:relative;width:100%;height:100%;overflow:hidden;font-size:calc(100cqw / 24.375);font-family:Montserrat,system-ui,sans-serif;color:#111;letter-spacing:0;text-align:left;-webkit-font-smoothing:antialiased}
.ap *{box-sizing:border-box}
.ap p{margin:0}
.ap .ap-i{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ap .ap__mov{position:absolute;left:0;top:0;width:100%}
.ap .ap-k{position:absolute}
.ap .ap-st{position:absolute;left:0em;top:0em;width:24.375em;height:1.875em;z-index:5;background:linear-gradient(#fff 55%,rgba(255,255,255,0))}
.ap .ap-st b{position:absolute;left:1.846em;top:0.6154em;font-size:0.8125em;font-weight:600;color:#111;line-height:1.2;white-space:nowrap}
.ap .ap-st i{position:absolute;left:19.875em;top:0.6875em;width:3.125em;height:0.625em;display:flex;gap:.3em;align-items:center;justify-content:flex-end}
.ap .ap-st i s{width:0.875em;height:0.5625em;display:block;border-radius:.12em;background:#111;text-decoration:none}
.ap .ap-st i s:first-child{width:1em;height:0.5625em;background:linear-gradient(90deg,#111 0 15%,transparent 15% 28%,#111 28% 43%,transparent 43% 57%,#111 57% 71%,transparent 71% 85%,#111 85%);clip-path:polygon(0 100%,100% 0,100% 100%)}
.ap .ap-st i s:nth-child(2){width:0.875em;height:0.625em;border-radius:50% 50% 0 0 / 100% 100% 0 0;clip-path:polygon(50% 100%,0 0,100% 0)}
.ap .ap-st i s:last-child{width:1.375em;height:0.625em;border-radius:.18em;background:none;box-shadow:inset 0 0 0 .09em #111,inset 0 0 0 .2em #fff,inset 0 0 0 1em #111}
.ap .ap-foto{position:absolute;left:0em;top:4em;width:24.4375em;height:14.3125em;display:block;object-fit:cover;object-position:50% 55%;border-radius:0 0 1.875em 1.875em}
.ap .ap-cab{position:absolute;left:0em;top:0em;width:24.375em;height:5.5em;background:#fff;border-radius:0 0 .9375em .9375em}
.ap .ap-atras{position:absolute;left:1.5em;top:2.5em;width:0.875em;height:1.375em;color:#000;stroke-width:2.2}
.ap .ap-tit{position:absolute;left:3.188em;top:2.438em;font-size:1em;font-weight:500;color:#000;line-height:1.2;white-space:nowrap}
.ap .ap-lock{position:absolute;left:19.1875em;top:2.1875em;width:3.4375em;height:1.75em;border-radius:999px;background:#D6D6D6}
.ap .ap-lock::before{position:absolute;left:0.125em;top:0.125em;width:1.5em;height:1.5em;content:"";border-radius:50%;background:#FFFFFD}
.ap .ap-lock .ap-i{position:absolute;left:0.4375em;top:0.375em;width:0.875em;height:1em;color:#434343;stroke-width:1.8}
.ap .ap-bt{position:absolute;left:20.6875em;top:0em;width:2.375em;height:2.375em;border-radius:50%;background:#D6D6D6;display:grid;place-items:center}
.ap .ap-bt.es-1{top:11.4375em}.ap .ap-bt.es-2{top:14.5625em}
.ap .ap-bt .ap-i{width:1.125em;height:1.125em;color:#111;stroke-width:1.2}
.ap .ap-bt.es-2::after{position:absolute;left:1.6875em;top:0.0625em;width:0.375em;height:0.375em;content:"";border-radius:50%;background:#D41111}
.ap .ap-nav{position:absolute;left:0.625em;width:23.125em;height:3.6875em;position:absolute;left:0.625em;bottom:1.875em;z-index:5;display:flex;justify-content:space-around;align-items:center;border-radius:.75em;background:#000}
.ap .ap-nav span{width:3.875em;display:flex;flex-direction:column;align-items:center;gap:0.3125em;color:#fff}
.ap .ap-nav .ap-i{width:1.4375em;height:1.4375em;stroke-width:1.5}
.ap .ap-nav b{font-size:0.5938em;font-weight:500;color:currentColor;line-height:1.2;white-space:nowrap}
.ap .ap-nav .es-on{color:#D41111}
.ap .ap-fab{width:3.1875em;height:3.1875em;position:absolute;right:1em;bottom:6.625em;z-index:5;border-radius:50%;background:#151A10;box-shadow:0 0 0 0.0938em #4F5B28,0 0.375em 0.875em rgba(0,0,0,.35);display:grid;place-items:center;color:#C9F05A}
.ap .ap-fab .ap-i{width:1.5em;height:1.5em;stroke-width:1.6}
.ap .ap-home{width:8.375em;height:0.3125em;position:absolute;left:8em;bottom:0.5625em;z-index:5;border-radius:999px;background:#3A3A3A}
.ap .ap-carga{width:20.8125em;height:19.0625em;background:#F8F8F8;border-radius:.5em}
.ap .ap-carga .ap-est{position:absolute;left:1.556em;top:0.5556em;font-size:0.5625em;font-weight:600;color:#39AC55;line-height:1.2;white-space:nowrap}
.ap .ap-carga .ap-pista{position:absolute;left:0.6875em;top:1.4375em;width:19.5em;height:0.5625em;border-radius:999px;background:#F0F0F0;overflow:hidden}
.ap .ap-carga .ap-pista i{position:absolute;left:0em;top:0em;width:9.75em;height:0.5625em;border-radius:999px;background:#39AC55}
.ap .ap-pct{position:absolute;left:0.625em;top:2.6875em;width:9.5em;height:3.375em;border-radius:.625em;background:#F4F4F4}
.ap .ap-carga .ap-pct.es-2{left:10.625em;box-shadow:inset 0 0 0 1px #39AC55}
.ap .ap-pct b{position:absolute;left:1em;top:0.8571em;font-size:0.875em;font-weight:500;color:#111;line-height:1.2;white-space:nowrap}
.ap .ap-pct span{position:absolute;left:1.167em;top:2.5em;font-size:0.75em;font-weight:400;color:#767575;line-height:1.2;white-space:nowrap}
.ap .ap-pct .ap-bat{position:absolute;left:7.3125em;top:1.3125em;width:1.25em;height:0.5625em;border:1px solid #111;border-radius:2px;padding:1px}
.ap .ap-pct .ap-bat::before{width:0.5625em;content:"";display:block;height:100%;border-radius:1px;background:#111}
.ap .ap-pct .ap-bat::after{position:absolute;left:1.25em;top:0.125em;width:0.125em;height:0.25em;content:"";border-radius:0 1px 1px 0;background:#111}
.ap .ap-pct .ap-i{position:absolute;left:3.25em;top:0.875em;width:0.75em;height:0.75em;color:#111;stroke-width:1.8}
.ap .ap-dato{position:absolute;top:6.75em;width:5.8125em;height:5.5625em;border-radius:.625em;background:#F4F4F4}
.ap .ap-dato.es-1{left:0.6875em}.ap .ap-dato.es-2{left:7.125em;width:6.1875em}.ap .ap-dato.es-3{left:14em;width:6em}
.ap .ap-dato .ap-i{position:absolute;left:1em;top:0.9375em;width:1.125em;height:1.125em;color:#949494;stroke-width:1.3}
.ap .ap-dato b{position:absolute;left:1.143em;top:3.571em;font-size:0.875em;font-weight:500;color:#111;line-height:1.2;white-space:nowrap}
.ap .ap-dato span{position:absolute;left:1.333em;top:5.667em;font-size:0.75em;font-weight:400;color:#767575;line-height:1.2;white-space:nowrap}
.ap .ap-tiempo{position:absolute;left:0.9375em;top:13.4375em;width:6.3125em;height:2.0625em;border-radius:999px;background:#fff}
.ap .ap-tiempo .ap-i{position:absolute;left:0.5625em;top:0.625em;width:0.8125em;height:0.8125em;color:#9C9C9C;stroke-width:1.8}
.ap .ap-tiempo b{position:absolute;left:2.833em;top:0.6667em;font-size:0.75em;font-weight:500;color:#767575;line-height:1.2;white-space:nowrap}
.ap .ap-boton{position:absolute;left:7.625em;top:13.5em;width:12.1875em;height:2em;border-radius:999px;background:#111;display:flex;align-items:center;justify-content:center}
.ap .ap-boton b{font-size:0.75em;font-weight:500;color:#FFFFFD;line-height:1.2;white-space:nowrap;padding-right:1.2em}
.ap .ap-boton i{position:absolute;left:10.5625em;top:0.375em;width:1.25em;height:1.25em;border-radius:50%;background:#F8F8F8}
.ap .ap-boton i::before{position:absolute;left:0.4375em;top:0.375em;width:0.375em;height:0.5em;content:"";border-left:1.5px solid #414141;border-right:1.5px solid #414141}
.ap .ap-aviso{position:absolute;left:1.5em;top:16.8125em;width:16.25em;height:1em}
.ap .ap-aviso .ap-info{position:absolute;left:0;top:0;font-size:0.5625em;width:1.556em;height:1.556em;border-radius:50%;background:#0C0C0C;color:#fff;display:grid;place-items:center;font-weight:700;font-style:normal;line-height:1}
.ap .ap-aviso span{position:absolute;left:2.167em;top:0em;font-size:0.75em;font-weight:400;color:#767575;line-height:1.2;white-space:nowrap}
.ap .ap-carga.es-pausa{height:12.625em}
.ap .ap-carga.es-pausa .ap-est{color:#9C9C9C}.ap .ap-carga.es-pausa .ap-pista i{background:#C0C0C0}
.ap .ap-carga.es-pausa .ap-dato{top:2.875em}
.ap .ap-carga.es-pausa .ap-dato b{font-size:0.75em;left:1.333em;top:4.5em}.ap .ap-carga.es-pausa .ap-dato span{font-size:0.625em;color:#C1C2C4;left:1.6em;top:6.7em}
.ap .ap-carga.es-pausa .ap-tiempo{top:9.625em;left:0.6875em}.ap .ap-carga.es-pausa .ap-tiempo b{color:#9C9C9C}
.ap .ap-carga.es-pausa .ap-boton{top:9.6875em;left:7.5625em;width:12.5625em;background:#00A907}
.ap .ap-carga.es-pausa .ap-boton i{left:10.9375em}
.ap .ap-carga.es-pausa .ap-boton i::before{left:0.5em;top:0.3438em;width:0;height:0;border:0;border-left:0.4375em solid #00A907;border-top:0.2812em solid transparent;border-bottom:0.2812em solid transparent}
.ap .ap-insignia{width:20.8125em;height:2.1875em;border-radius:.625em;background:#000;color:#fff}
.ap .ap-insignia .ap-i{position:absolute;left:1em;top:0.625em;width:0.9375em;height:0.9375em;stroke-width:1.6}
.ap .ap-insignia b{position:absolute;left:3.5em;top:0.8333em;font-size:0.75em;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap}
.ap .ap-bats{width:20.8125em;height:4.25em;background:#F8F8F8;border-radius:.5em}
.ap .ap-bats .ap-pct{top:0.4375em;left:0.6875em}.ap .ap-bats .ap-pct.es-2{left:10.75em;box-shadow:inset 0 0 0 1px #39AC55}
.ap .ap-cdp{width:20.75em;height:6.4375em;background:#F8F8F8;border-radius:.625em}
.ap .ap-cdp > b{position:absolute;left:1.25em;top:1em;font-size:0.75em;font-weight:600;color:#4E4E4E;line-height:1.2;white-space:nowrap}
.ap .ap-cdp > span{position:absolute;left:1.25em;top:2.25em;font-size:0.75em;font-weight:400;color:#4E4E4E;line-height:1.2;white-space:nowrap}
.ap .ap-cdp > .ap-i{position:absolute;left:18.75em;top:0.9375em;width:1em;height:1em;color:#2D2D2D;stroke-width:1.4}
.ap .ap-cdp li{position:absolute;top:3.1875em;width:6.1875em;height:2.5625em;list-style:none;border-radius:.3125em;background:#fff}
.ap .ap-cdp ul{margin:0;padding:0}.ap .ap-cdp li:nth-child(1){left:0.6875em}.ap .ap-cdp li:nth-child(2){left:7.25em;width:6.3125em}.ap .ap-cdp li:nth-child(3){left:13.9375em;width:6.25em}
.ap .ap-cdp li b{position:absolute;left:0.8333em;top:0.75em;font-size:0.75em;font-weight:500;color:#111;line-height:1.2;white-space:nowrap}
.ap .ap-cdp li span{position:absolute;left:1em;top:2.3em;font-size:0.625em;font-weight:400;color:#C1C2C4;line-height:1.2;white-space:nowrap}
.ap .ap-cdp li .ap-i{position:absolute;left:4.3125em;top:0.6875em;width:1.1875em;height:1.1875em;color:#7B7B7B;stroke-width:1.1}
.ap .ap-eco{width:20.8125em;height:7.0625em;border-radius:.625em;box-shadow:inset 0 0 0 1px #39AC55}
.ap .ap-eco > b{position:absolute;left:1.167em;top:1em;font-size:0.75em;font-weight:700;color:#39AC55;line-height:1.2;white-space:nowrap;background:linear-gradient(90deg,#39AC55,#2C7DA0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ap .ap-eco > span{position:absolute;left:1.25em;top:2.167em;font-size:0.75em;font-weight:400;color:#4E4E4E;line-height:1.2;white-space:nowrap}
.ap .ap-eco .ap-i{position:absolute;left:18.8125em;top:0.75em;width:1.0625em;height:1.0625em;color:#2C7DA0;stroke-width:1.4}
.ap .ap-eco p{position:absolute;left:1.167em;top:5.917em;font-size:0.75em;font-weight:400;color:#727272;line-height:1.2;white-space:nowrap;white-space:normal;width:9.6em;line-height:1.25}
.ap .ap-eco strong{font-size:2em;font-weight:700;color:#39AC55;line-height:1.2;white-space:nowrap;position:absolute;right:1.156em;top:1.812em;letter-spacing:-.01em}
.ap .ap-eco em{position:absolute;left:14.8em;top:3.6em;font-size:1.25em;font-weight:400;color:#39AC55;line-height:1.2;white-space:nowrap;font-style:normal}
.ap .ap-dos{width:20.6875em;height:3.8125em}
.ap .ap-dos > div{position:absolute;left:0em;top:0em;width:10.0625em;height:3.8125em;border-radius:.625em;background:#DFDFDF}
.ap .ap-dos > div + div{left:10.625em}
.ap .ap-dos > div > .ap-i{position:absolute;left:0.8125em;top:1.1875em;width:1.375em;height:1.375em;color:#626262;stroke-width:1.2}
.ap .ap-dos b{position:absolute;left:4.8em;top:1.8em;font-size:0.625em;font-weight:600;color:#4E4E4E;line-height:1.2;white-space:nowrap}
.ap .ap-dos span{position:absolute;left:4em;top:2.583em;font-size:0.75em;font-weight:400;color:#4E4E4E;line-height:1.2;white-space:nowrap}
.ap .ap-dos .es-f{position:absolute;left:8.3125em;top:1.375em;width:1.0625em;height:1.0625em;color:#ACACAC;stroke-width:1.3}
.ap .ap-prog{width:20.75em;height:2.6875em;border-radius:.625em;box-shadow:inset 0 0 0 1px #3AA170}
.ap .ap-prog .ap-i{position:absolute;left:0.6875em;top:0.6875em;width:1.3125em;height:1.3125em;color:#39AC55;stroke-width:1.5}
.ap .ap-prog b{position:absolute;left:3.333em;top:1.083em;font-size:0.75em;font-weight:700;color:#39AC55;line-height:1.2;white-space:nowrap;background:linear-gradient(90deg,#39AC55,#2C7DA0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ap .ap-prog .es-f{position:absolute;left:18.8125em;top:0.8125em;width:1.0625em;height:1.0625em;color:#2C7DA0;stroke-width:1.4}
.ap .ap-int{width:20.75em;height:6em;background:#F8F8F8;border-radius:.625em}
.ap .ap-int > b{position:absolute;left:1.25em;top:1em;font-size:0.75em;font-weight:600;color:#4E4E4E;line-height:1.2;white-space:nowrap}
.ap .ap-int .ap-riel{position:absolute;left:0.6875em;top:3.875em;width:19.5625em;height:0.3125em;border-radius:999px;background:#D9D9D9}
.ap .ap-int .ap-riel i{position:absolute;left:0em;top:0em;width:13.6875em;height:0.3125em;border-radius:999px;background:#0C0C0C}
.ap .ap-int .ap-riel s{position:absolute;left:13.0625em;top:-0.2812em;width:0.875em;height:0.875em;border-radius:50%;background:#0C0C0C}
.ap .ap-int .ap-v{position:absolute;left:17.08em;top:3.083em;font-size:0.75em;font-weight:700;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-int .ap-min{position:absolute;left:1.667em;top:8.333em;font-size:0.5625em;font-weight:300;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-int .ap-max{position:absolute;left:32.89em;top:8.333em;font-size:0.5625em;font-weight:300;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-sum{width:20.75em;height:14.875em;background:#F8F8F8;border-radius:.625em}
.ap .ap-sum .ap-pills{position:absolute;left:0.625em;top:1em;width:19.5em;height:1.1875em}
.ap .ap-sum .ap-pills span{position:absolute;top:0em;height:1.1875em;position:absolute;border-radius:999px;background:#F1F1F1;display:grid;place-items:center}
.ap .ap-sum .ap-pills span:nth-child(1){left:0;width:3.9375em;background:#DFDFDF}.ap .ap-sum .ap-pills span:nth-child(2){left:4.5em;width:3.875em}.ap .ap-sum .ap-pills span:nth-child(3){left:8.9375em;width:4.375em}.ap .ap-sum .ap-pills span:nth-child(4){left:13.875em;width:5.625em}
.ap .ap-sum .ap-pills b{font-size:0.625em;font-weight:400;color:#777;line-height:1.2;white-space:nowrap}
.ap .ap-sum .ap-pills span:nth-child(1) b{color:#0C0C0C}
.ap .ap-sum .ap-t{position:absolute;left:0em;top:0em;width:9.5625em;height:3.875em;border-radius:.78em;background:#FBFBFB}
.ap .ap-sum .ap-t.es-1{left:0.625em;top:3.0625em}.ap .ap-sum .ap-t.es-2{left:10.5625em;top:3.0625em}.ap .ap-sum .ap-t.es-3{left:0.625em;top:7.5625em}.ap .ap-sum .ap-t.es-4{left:10.5625em;top:7.5em}
.ap .ap-sum .ap-t b{position:absolute;left:0.625em;top:0.625em;font-size:1.5em;font-weight:400;color:#111;line-height:1.2;white-space:nowrap;letter-spacing:-.01em}
.ap .ap-sum .ap-t b small{font-size:.6em;font-weight:400;margin-left:.15em}
.ap .ap-sum .ap-t span{position:absolute;left:1.4em;top:4.2em;font-size:0.625em;font-weight:400;color:#C1C2C4;line-height:1.2;white-space:nowrap}
.ap .ap-sum .ap-t .ap-i{position:absolute;left:7.8125em;top:1.4375em;width:1.0625em;height:1.0625em;color:#C1C2C4;stroke-width:1.2}
.ap .ap-sum .ap-ver{position:absolute;left:0.625em;top:12.1875em;width:19.375em;height:2.0625em;border-radius:.625em;background:#DFDFDF;display:grid;place-items:center}
.ap .ap-sum .ap-ver b{font-size:0.625em;font-weight:600;color:#4E4E4E;line-height:1.2;white-space:nowrap}
.ap .ap-velo{position:absolute;left:0em;top:0em;width:24.375em;height:87.5em;z-index:4;background:rgba(221,221,221,.75)}
.ap .ap-modal{position:absolute;left:2em;top:19.125em;width:20.5625em;height:15.75em;z-index:4;background:#FFFFFD;border-radius:1.25em;box-shadow:0 1.2em 2.5em -1.4em rgba(0,0,0,.35)}
.ap .ap-modal > b{position:absolute;left:1.643em;top:1.5em;font-size:0.875em;font-weight:500;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-modal > .ap-i{position:absolute;left:18.3125em;top:1.25em;width:1em;height:1em;color:#0C0C0C;stroke-width:1.6}
.ap .ap-modal > p{position:absolute;left:1.917em;top:3.833em;font-size:0.75em;font-weight:400;color:#898989;line-height:1.2;white-space:nowrap;white-space:normal;width:20.5em;line-height:1.25}
.ap .ap-modal .ap-caja{position:absolute;left:1.4375em;top:5.75em;width:17.6875em;height:5em;border-radius:.625em;background:#F4F4F4}
.ap .ap-modal .ap-riel{position:absolute;left:1.0625em;top:2.625em;width:15.125em;height:0.3125em;border-radius:999px;background:#D9D9D9}
.ap .ap-modal .ap-riel i{position:absolute;left:0em;top:0em;width:10.6875em;height:0.3125em;border-radius:999px;background:#0C0C0C;width:calc(var(--ap-cd) / 100 * 15.125em)}
.ap .ap-modal .ap-riel s{position:absolute;left:0em;top:-0.1562em;width:0.625em;height:0.625em;border-radius:50%;background:#0C0C0C;left:calc(var(--ap-cd) / 100 * 15.125em - .3125em)}
.ap .ap-modal .ap-v{position:absolute;left:0em;top:1.5em;font-size:0.75em;font-weight:700;color:#0C0C0C;line-height:1.2;white-space:nowrap;left:calc(var(--ap-cd) / 100 * 15.125em + 1.0625em - 1.25em);counter-reset:apcd var(--ap-cd)}
.ap .ap-modal .ap-v::before{content:counter(apcd) " %"}
.ap .ap-modal .ap-min{position:absolute;left:1.889em;top:6em;font-size:0.5625em;font-weight:300;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-modal .ap-max{position:absolute;left:26.44em;top:6.111em;font-size:0.5625em;font-weight:300;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-modal .ap-guardar{position:absolute;left:1.4375em;top:12.0625em;width:17.6875em;height:2.0625em;border-radius:.625em;background:#000;display:grid;place-items:center}
.ap .ap-modal .ap-guardar b{font-size:0.625em;font-weight:600;color:#fff;line-height:1.2;white-space:nowrap}
.ap .ap-cab2{position:absolute;left:0em;top:0em;width:24.375em;height:4.125em}
.ap .ap-cab2 .ap-i{position:absolute;left:1em;top:2.3125em;width:0.875em;height:1.5em;color:#111;stroke-width:1.6}
.ap .ap-cab2 b{position:absolute;top:2.759em;font-size:0.9062em;font-weight:600;color:#111;line-height:1.2;white-space:nowrap;position:absolute;left:0;right:0;text-align:center}
.ap .ap-fechas{position:absolute;left:4.3125em;top:6.75em;width:15.75em;height:2.75em;border-radius:.75em;background:#7A7A7A;color:#fff}
.ap .ap-fechas span{position:absolute;left:1.9em;top:0.6em;font-size:0.625em;font-weight:400;color:#fff;line-height:1.2;white-space:nowrap}
.ap .ap-fechas b{position:absolute;left:1.714em;top:1.357em;font-size:0.875em;font-weight:400;color:#fff;line-height:1.2;white-space:nowrap}
.ap .ap-fechas span.es-2{left:16em}.ap .ap-fechas b.es-2{left:11.71em}
.ap .ap-fechas .ap-i{position:absolute;left:7.25em;top:0.8125em;width:1.125em;height:1.125em;stroke-width:1.6}
.ap .ap-hoja{position:absolute;left:0.9375em;top:10.4375em;width:22.5em;height:51.25em;background:#fff;border-radius:.8125em}
.ap .ap-tabs{position:absolute;left:0em;top:1.125em;width:22.5em;height:2.5em}
.ap .ap-tabs .ap-i{position:absolute;top:0em;width:1.375em;height:1.375em;position:absolute;color:#9A9A9A;stroke-width:1.2}
.ap .ap-tabs .ap-i:nth-child(1){left:2.1875em}.ap .ap-tabs .ap-i:nth-child(2){left:7.75em}.ap .ap-tabs .ap-i:nth-child(3){left:13.3125em}.ap .ap-tabs .ap-i:nth-child(4){left:18.875em;color:#111;stroke-width:1.6}
.ap .ap-tabs::after{position:absolute;left:16.8125em;top:2.3125em;width:5.625em;height:0.125em;content:"";background:#111}
.ap .ap-res{position:absolute;top:4.5em;width:6.5625em;height:3.625em;border-radius:.75em;background:#fff;box-shadow:inset 0 0 0 1px #E6E6E6;text-align:center}
.ap .ap-res.es-1{left:0.875em}.ap .ap-res.es-2{left:8em}.ap .ap-res.es-3{left:15.0625em}
.ap .ap-res span{font-size:0.5312em;font-weight:600;color:#9A9A9A;line-height:1.2;white-space:nowrap;position:absolute;left:0;right:0;top:1.7em;letter-spacing:.12em}
.ap .ap-res b{font-size:0.7812em;font-weight:700;color:#111;line-height:1.2;white-space:nowrap;position:absolute;left:0;right:0;top:2.35em}
.ap .ap-res b small{font-size:.75em;font-weight:400;color:#777;margin-left:.15em}
.ap .ap-hoja > .ap-rec{position:absolute;left:1.565em;top:12.87em;font-size:0.7188em;font-weight:400;color:#111;line-height:1.2;white-space:nowrap}
.ap .ap-hoja > .ap-ses{position:absolute;top:14.9em;font-size:0.625em;font-weight:400;color:#5A6E82;line-height:1.2;white-space:nowrap;position:absolute;right:1.8em}
.ap .ap-hoja > .ap-ses b{font-size:1.1em;font-weight:400;margin-right:.3em}
.ap .ap-sesion{position:absolute;left:0.875em;width:20.8125em;height:5.4375em;border-radius:.8125em;background:#fff;box-shadow:0 .1em .9em -.2em rgba(0,0,0,.08)}
.ap .ap-sesion > b{position:absolute;left:1.25em;top:2.083em;font-size:0.75em;font-weight:700;color:#111;line-height:1.2;white-space:nowrap}
.ap .ap-sesion > b small{font-size:.8em;font-weight:400;color:#888;margin-left:.45em}
.ap .ap-sesion .ap-rfid{position:absolute;left:7.5625em;top:1.0625em;width:1.3125em;height:1.25em}
.ap .ap-sesion .ap-rfid i{position:absolute;left:0;top:1.333em;font-size:0.375em;width:3.5em;height:1.833em;border-radius:.3em;background:#111;color:#fff;display:grid;place-items:center;font-weight:700;font-style:normal;line-height:1;letter-spacing:.02em}
.ap .ap-sesion .ap-rfid .ap-i{position:absolute;left:0.3438em;top:0em;width:0.625em;height:0.5625em;color:#111;stroke-width:2.2}
.ap .ap-sesion .ap-pp{position:absolute;left:0.9375em;top:3.25em;width:16.25em;height:1.1875em;display:flex;gap:.3125em}
.ap .ap-sesion .ap-pp span{height:1.1875em;display:flex;align-items:center;gap:.25em;padding:0 .5em 0 .4em;border-radius:999px;background:#EEEEEE}
.ap .ap-sesion .ap-pp span + span{background:#E3EFFA}
.ap .ap-sesion .ap-pp .ap-i{width:0.6875em;height:0.6875em;color:#8A8A8A;stroke-width:1.8}
.ap .ap-sesion .ap-pp span + span .ap-i{color:#F2B705;fill:#F2B705;stroke-width:1}
.ap .ap-sesion .ap-pp b{font-size:0.625em;font-weight:500;color:#333;line-height:1.2;white-space:nowrap}
.ap .ap-sesion .ap-pp span + span b{font-weight:600;color:#111}
.ap .ap-sesion > strong{font-size:0.8125em;font-weight:700;color:#111;line-height:1.2;white-space:nowrap;position:absolute;right:1.154em;top:2.615em}
.ap .ap-foto.es-alta{top:0;height:18.3125em}
.ap .ap-lapiz{position:absolute;left:12.875em;top:2.6875em;width:0.9375em;height:0.9375em;color:#111;stroke-width:1.5}
.ap .ap-gal{position:absolute;left:20.5em;top:6.375em;width:2em;height:2em;border-radius:.5em;background:rgba(214,214,214,.8);display:grid;place-items:center}
.ap .ap-gal .ap-i{width:1.25em;height:1.25em;color:#222;stroke-width:1.2}
.ap .ap-ids{position:absolute;left:1em;top:14.75em;width:22.375em;height:2.625em;border-radius:.625em;background:rgba(214,214,214,.85);display:flex;justify-content:space-around;align-items:center;text-align:center}
.ap .ap-ids span{font-size:0.5625em;font-weight:600;color:#898989;line-height:1.2;white-space:nowrap;display:block}
.ap .ap-ids b{font-size:0.75em;font-weight:400;color:#4B4B4B;line-height:1.2;white-space:nowrap;display:block}
.ap .ap-luz{position:absolute;left:1em;top:19.25em;width:22.375em;height:5.875em;border-radius:.625em;background:#FFFFFD}
.ap .ap-luz > .ap-i{position:absolute;left:1.375em;top:0.875em;width:1.25em;height:1.25em;color:#111;stroke-width:1.3}
.ap .ap-luz .ap-sw{position:absolute;left:19.8125em;top:0.75em;width:1.75em;height:0.9375em;border-radius:999px;background:#0C0C0C}
.ap .ap-luz .ap-sw::after{position:absolute;left:0.875em;top:0.0938em;width:0.75em;height:0.75em;content:"";border-radius:50%;background:#FFFFFD}
.ap .ap-luz .ap-riel{position:absolute;left:1.6875em;top:3.375em;width:19.625em;height:0.375em;border-radius:999px;background:#D9D9D9}
.ap .ap-luz .ap-riel i{position:absolute;left:0em;top:0em;width:13.75em;height:0.375em;border-radius:999px;background:#0C0C0C}
.ap .ap-luz .ap-riel s{position:absolute;left:13.3125em;top:-0.2812em;width:0.9375em;height:0.9375em;border-radius:50%;background:#0C0C0C}
.ap .ap-luz .ap-min{position:absolute;left:1.8em;top:4.133em;font-size:0.9375em;font-weight:300;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-luz .ap-max{position:absolute;left:22.13em;top:4.133em;font-size:0.9375em;font-weight:300;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-opc{position:absolute;left:1em;width:22.375em;height:3.75em;border-radius:.625em;background:#FFFFFD}
.ap .ap-opc > .ap-i{position:absolute;left:0.875em;top:0.5625em;width:1.25em;height:1.25em;color:#0C0C0C;stroke-width:1.2}
.ap .ap-opc b{position:absolute;left:3.214em;top:0.6429em;font-size:0.875em;font-weight:500;color:#0C0C0C;line-height:1.2;white-space:nowrap}
.ap .ap-opc span{position:absolute;left:3.75em;top:2.5em;font-size:0.75em;font-weight:300;color:#434343;line-height:1.2;white-space:nowrap}
.ap .ap-opc .es-f{position:absolute;left:20.375em;top:1.25em;width:1.25em;height:1.25em;color:#0C0C0C;stroke-width:1.4}
.ap .ap-elim{position:absolute;top:85.67em;font-size:0.75em;font-weight:400;color:#D41111;line-height:1.2;white-space:nowrap;position:absolute;left:0;right:0;text-align:center;top:85.67em}
.ap .ap-dedo{position:absolute;left:0em;top:0em;width:2.125em;height:2.125em;display:none;z-index:6;border-radius:50%;background:rgba(110,110,110,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 .2em .6em rgba(0,0,0,.12);pointer-events:none}
.ap .ap-sel{position:absolute;left:1em;top:25.8125em;width:22.375em;height:3.75em;display:none;z-index:1;border-radius:.625em;background:rgba(17,17,17,.07);box-shadow:inset 0 0 0 1px rgba(17,17,17,.08);pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  @keyframes ap-cd{0%,20%{--ap-cd:55}55%,100%{--ap-cd:80}}
  .ap .ap-modal{animation:ap-cd 4s ease-in-out infinite alternate}
  .ap[class*="es-p"] .ap-n > i{display:none}

  /* 1 · Cargando: la sesion en camara rapida (14 min en 10 s) */
  @keyframes ap-t{0%{--ap-t:0}82%,100%{--ap-t:1}}
  @keyframes ap-brillo{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}
  .ap.es-p1 .ap-carga{animation:ap-t 12s linear infinite;
    --ap-soc:calc(55 + var(--ap-t) * 3);
    --ap-e:calc(115 + var(--ap-t) * 17);--ap-ei:calc((var(--ap-e) - 4.5) / 10);--ap-ef:calc(var(--ap-e) - var(--ap-ei) * 10);
    --ap-c:calc(34 + var(--ap-t) * 5);--ap-ci:calc((var(--ap-c) - 4.5) / 10);--ap-cf:calc(var(--ap-c) - var(--ap-ci) * 10);
    --ap-m:calc(45 + var(--ap-t) * 14);--ap-r:calc(73 - var(--ap-m))}
  .ap.es-p1 .ap-carga .ap-pista i{width:calc((55 + var(--ap-t) * 3) / 100 * 19.5em)}
  .ap.es-p1 .ap-carga .ap-pista i::after{content:"";position:absolute;inset:0;width:40%;border-radius:inherit;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));animation:ap-brillo 2.4s ease-in-out infinite}
  .ap.es-p1 .ap-pct .ap-bat::before{width:calc(var(--ap-soc) * .01em)}

  /* 2 · Vehiculo conectado: enchufas y la app lee la bateria */
  @keyframes ap-u{0%,18%{--ap-u:0}52%,100%{--ap-u:1}}
  @keyframes ap-entra{0%,4%{opacity:0;transform:translateY(-.6em) scale(.97)}14%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  @keyframes ap-entra2{0%,12%{opacity:0;transform:translateY(-.4em)}20%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  .ap.es-p2 .ap-insignia{animation:ap-entra 7s cubic-bezier(.3,0,.2,1) infinite}
  .ap.es-p2 .ap-bats{animation:ap-u 7s cubic-bezier(.2,.6,.2,1) infinite,ap-entra2 7s cubic-bezier(.3,0,.2,1) infinite;--ap-soc:calc(var(--ap-u) * 55)}
  .ap.es-p2 .ap-pct .ap-bat::before{width:calc(var(--ap-soc) * .01em)}

  /* 4 · Pausada: el dedo sube la intensidad de 11 a 20 A y vuelve */
  @keyframes ap-x{0%,14%{--ap-x:0}46%,60%{--ap-x:1}90%,100%{--ap-x:0}}
  @keyframes ap-dedo{0%,4%{opacity:0;transform:scale(.7)}11%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:scale(.7)}}
  .ap.es-p4 .ap-int{animation:ap-x 8s cubic-bezier(.45,0,.25,1) infinite;--ap-a:calc(11 + var(--ap-x) * 9)}
  .ap.es-p4 .ap-int .ap-riel i:first-child{width:calc((5 + var(--ap-x) * 9) / 26 * 19.5625em)}
  .ap.es-p4 .ap-int .ap-riel s{left:calc((5 + var(--ap-x) * 9) / 26 * 19.5625em - .4375em)}
  .ap.es-p4 .ap-int .ap-v{left:calc(((5 + var(--ap-x) * 9) / 26 * 313 + 11) / 12 * 1em - 1.15em)}
  .ap.es-p4 .ap-int .ap-dedo{display:block;top:-.90625em;left:calc((5 + var(--ap-x) * 9) / 26 * 19.5625em - 1.0625em);animation:ap-dedo 8s ease infinite}

  /* 5 · Estadisticas: llega una recarga nueva arriba */
  @keyframes ap-lista{0%,20%{transform:translateY(-6.125em)}36%,86%{transform:none}97%,100%{transform:translateY(-6.125em)}}
  @keyframes ap-nueva{0%,24%{opacity:0;transform:scale(.97)}38%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.97)}}
  @keyframes ap-ses{0%,30%{--ap-ses:19}31%,88%{--ap-ses:20}89%,100%{--ap-ses:19}}
  .ap.es-p5 .ap-lista{position:absolute;inset:0;animation:ap-lista 8s cubic-bezier(.45,0,.25,1) infinite}
  .ap.es-p5 .ap-lista .ap-sesion:first-child{animation:ap-nueva 8s cubic-bezier(.3,0,.2,1) infinite}
  .ap.es-p5 .ap-ses b{animation:ap-ses 8s linear infinite}

  /* 6 · Ajustes: el dedo recorre el menu */
  @keyframes ap-sel{0%,6%{top:25.8125em;opacity:0}11%,24%{top:25.8125em;opacity:1}31%,44%{top:30.4375em}51%,64%{top:35.0625em}71%,84%{top:39.6875em;opacity:1}91%,100%{top:39.6875em;opacity:0}}
  @keyframes ap-sel-d{0%,6%{top:26.625em;opacity:0}11%,24%{top:26.625em;opacity:1}31%,44%{top:31.25em}51%,64%{top:35.875em}71%,84%{top:40.5em;opacity:1}91%,100%{top:40.5em;opacity:0}}
  .ap.es-p6 .ap-sel{display:block;animation:ap-sel 9s cubic-bezier(.45,0,.25,1) infinite}
  .ap.es-p6 > .ap__mov > .ap-dedo{display:block;left:18.9375em;animation:ap-sel-d 9s cubic-bezier(.45,0,.25,1) infinite}
}
@media(prefers-reduced-motion:no-preference){
  .ap[class*="es-p"] .ap-n.es-soc{counter-reset:apsoc var(--ap-soc)}.ap[class*="es-p"] .ap-n.es-soc::before{content:counter(apsoc)}
  .ap[class*="es-p"] .ap-n.es-e{counter-reset:apei var(--ap-ei) apef var(--ap-ef)}.ap[class*="es-p"] .ap-n.es-e::before{content:counter(apei) "," counter(apef) " kWh"}
  .ap[class*="es-p"] .ap-n.es-c{counter-reset:apci var(--ap-ci) apcf var(--ap-cf)}.ap[class*="es-p"] .ap-n.es-c::before{content:counter(apci) "," counter(apcf) " €"}
  .ap[class*="es-p"] .ap-n.es-m{counter-reset:apm var(--ap-m)}.ap[class*="es-p"] .ap-n.es-m::before{content:"00:" counter(apm,decimal-leading-zero) ":15"}
  .ap[class*="es-p"] .ap-n.es-r{counter-reset:apr var(--ap-r)}.ap[class*="es-p"] .ap-n.es-r::before{content:counter(apr)}
  .ap[class*="es-p"] .ap-n.es-ses{counter-reset:apses var(--ap-ses)}.ap[class*="es-p"] .ap-n.es-ses::before{content:counter(apses)}
  .ap[class*="es-p"] .ap-n.es-a{counter-reset:apa var(--ap-a)}.ap[class*="es-p"] .ap-n.es-a::before{content:counter(apa) " A"}
  .ap .ap-carga .ap-pista i,.ap[class*="es-p"] .ap-n{font-variant-numeric:tabular-nums}
}
.ap .ap-n > i{font-style:normal}
.ap .ap-aviso b{font-weight:inherit}
.trydan-app2__it{width:clamp(14.5rem,19vw,17.5rem)}
/* ═══ FIN APP V2C · PANTALLAS REALES ═══ */

/* ═══ ECOSISTEMA V2C · PORTALES REALES (v3, generado por build_eco.py) ═══ */
@property --ec-k{syntax:"<number>";inherits:true;initial-value:1}
@property --ec-p{syntax:"<number>";inherits:true;initial-value:1}
@property --ec-car{syntax:"<integer>";inherits:true;initial-value:0}
@property --ec-car2{syntax:"<integer>";inherits:true;initial-value:0}
@property --ec-eur{syntax:"<integer>";inherits:true;initial-value:0}
@property --ec-cts{syntax:"<integer>";inherits:true;initial-value:0}
@property --ec-kwh{syntax:"<integer>";inherits:true;initial-value:0}
@property --ec-pag{syntax:"<integer>";inherits:true;initial-value:0}
@property --ec-pct{syntax:"<integer>";inherits:true;initial-value:0}
@property --ec-con{syntax:"<integer>";inherits:true;initial-value:0}
@property --ec-nc{syntax:"<integer>";inherits:true;initial-value:0}

.ec-sprite{position:absolute;width:0;height:0;overflow:hidden}
.trydan-eco2__it{width:clamp(19rem,46vw,42rem)}
.trydan-win{aspect-ratio:auto;display:block;font-size:inherit}
.trydan-win__barra{padding:.55rem .9rem}
.trydan-win .trydan-win__cuerpo{display:block;position:relative;aspect-ratio:1280 / 880;container-type:inline-size;overflow:hidden}
.ec{position:absolute;inset:0;overflow:hidden;font-family:Montserrat,system-ui,sans-serif;font-size:1.094cqw;line-height:1.2;color:#0C0C0C;text-align:left;letter-spacing:0;-webkit-font-smoothing:antialiased}
.ec *{box-sizing:border-box;margin:0;padding:0;list-style:none}
.ec p,.ec span,.ec b{white-space:nowrap}
.ec b{font-weight:600}
.ec h4{font-family:inherit;line-height:1.2;color:inherit;text-transform:none}
.ec hr{height:0;background:none;margin:0}
.ec .i{display:block;flex:none;width:1.406cqw;height:1.406cqw;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ec .a{position:absolute}
.ec .ec-logo{display:block;fill:currentColor}
.ec .ec-th{display:block;flex:none;width:4.375cqw;height:4.375cqw;border-radius:0.7812cqw;background:#EEEEEE url(data:image/webp;base64,UklGRvAEAABXRUJQVlA4WAoAAAAQAAAAUwAAawAAQUxQSF4CAAABGTJpG9q38294JiL6H5EX5qC8//8hyelfzaxte6+27d2TzjaPiJM/wbznydnJzbratu2uOlQn336mPoPj5zOf9CZiAiaglogzLNBMqH8yTaqB6JJL+hfuAA1VUgOLsiSKImnTtiRRJdO2VSZF02WVKdK07VzJYtBiB7fYUznIFKNk/qIaMik450wbu9Vyy60//apdqyDLNq9kWn21elmQLWcS9rLwvXd9oHmTnLbHNAOwQDohTYsSO2jvM272uCZtc5dpakiKzJA0O/RwuzzsVhf9oRlb3G8YVrnNBXc56m+xSe4lVvyA424XO20qVv4aC30u0scONdWfYIP7RMaYBgAXY3ScoRBMEhqlHYK15nhJYBginGAGBvuBwEIkwZCJ1GGA/IgnIPrU9yIFCG0YrYMQx4QxCdVBiGMyJMx1EBTCnIOEWRAccpclgRTH9BcjMruqCmWEIG52pxUqQOgcDQmzITiEOWdEJiRDIsIkhDlnRJhtBEmMXeWcESQhzDYizIbgmBF0jjkjSEKYjckIFMJsQyJCQeokjUChHLvKNgLH2FW2EWFMIBnSRksgGmc2RHTEhtCK/OU/CH+K/O5/BE95WORnX0Pwll9E/vQiBG+rCe/2gOrlrsQGeNJilXtGHzGu8YhBKvazm7CZ+91tuEr96gI2d6Hr7dSuOi+7Gpu+0jqz9ZcoY1u2LEm2LMuyGluWVa77Ww2pgvybdz3qNTUVlCiKpBpTlHJ1NY3bEa1p9hgmJGVJomjapiSV7JwTZUSxQDvnTCKJLDBnM8lIJAu2c0lGEsmCnXMmoURWUDggbAIAAPAPAJ0BKlQAbAA+bS6RRaQioZnpjUBABsS0gArgCbwcPWpy5+no72CP1H6wHoS/sADlbBIP3J3quxacaO08SUxb43o7m7opgZnPGFHnG2nhn5+jwSrfahs150122zNuEKH5P1hGoh8Fbpmfo8EtVN9gl8PXStN+fTpDhdQpd86hX4c97UFbFIAA/umyyQV4fCjci5P+dccs9R0w3Jmbjp1Sw63IdQ4o1gPyu3RDFznlg0KxHHrDfe8fBIRPHLZeS3imfWp1FfxjlPYpXqtiBbyENBtEPh73z3/RKmwCRYlXiuMPyHFdGS20Lm/BRrtvitw9lR5ht3vuyju3fjCxkN+ATOZbk9TcaROLe/lH3ffC4D532dV//Lmg6mjwLHwXmVf//y5GxZ7abVJLQG3b+Kj/33t053joiP5bRx3v1s4Z1H+QopcFSMbrTYJRLEXpLZOZjFFQ6go1iavv/7/9w/pv7s6X63xP+eo8/Tcwn3wkKQNf/+yOCbqH5IeGfryHNripovw6mcgPo6Fc5cLmHPT8t9vzfYWChqIgRbhBsEbhAqUsJyw2B/23vXnsspgfSYvJ4vzWCVyp5Tyqm4SVhfGN+0EXqT0zj0PpFvCCOtRfBJiPSwX1D1EVoET8c0Tfi7wqEQpJXdWOrfzuog3ik2GH4ZQjF0j2Z6TiuP74Mjlu0049tOZL7bDpaebhdC3OcngwX6RK1GosGUkSjiEmt6os//7MBQZ5qNYazhlws0yeHFRd0VZKtsIMgPgMJNu8w5NZqa8yYyVIiv0eBpxYB7rv6dQhQH2A8E8093vQ95/d1yDTF/O1+8GAAAAA) center / 46% auto no-repeat}
.ec .ec-n::before{content:counter(ecn)}


.ec-cloud{background:#F7F7F9}
.ec-user{left:4.688cqw;top:3.906cqw;display:flex;align-items:center;gap:0.7031cqw}
.ec-user .i{width:3.75cqw;height:3.75cqw;stroke-width:1.9}
.ec-user b{display:block;width:9.531cqw;overflow:hidden;font-size:1.172cqw;font-weight:400}
.ec-user span{display:block;margin-top:0.3125cqw;font-size:0.9375cqw;font-weight:300}
.ec-tit{left:22.42cqw;top:4.062cqw;font-size:2.5cqw;font-weight:500;letter-spacing:.01em}
.ec-fab{left:93.44cqw;top:3.984cqw;width:3.438cqw;height:3.438cqw;border-radius:50%;background:#C6EB5B;box-shadow:0 0 0 0.3125cqw #fff,0 0.3125cqw 0.9375cqw rgba(0,0,0,.22);display:grid;place-items:center;color:#2E3A12}
.ec-fab .i{width:1.719cqw;height:1.719cqw}
.ec-lat{left:1.562cqw;top:9.766cqw;width:19.61cqw;height:65.94cqw;border-radius:1.562cqw;background:#1F1F1F;color:#FFFFFD}
.ec-lat ul{padding:1.484cqw 0 0 1.562cqw}
.ec-lat li{display:flex;align-items:center;gap:0.625cqw;height:3.594cqw;padding-left:0.3906cqw;font-size:1.094cqw}
.ec-lat li.on{border-bottom:0.1562cqw solid #D41111}
.ec-lat .i{stroke-width:1.4}
.ec-lat .ec-bajo{left:1.953cqw;top:47.19cqw;display:flex;flex-direction:column;gap:1.328cqw;font-size:1.094cqw}
.ec-lat .ec-bajo p{display:flex;align-items:center;gap:0.625cqw}
.ec-lat .ec-bajo p:first-child{padding-left:2.031cqw}
.ec-lat .ec-logo{left:6.094cqw;top:56.09cqw;width:7.422cqw;height:3.203cqw}
.ec-sub{left:21.95cqw;top:9.766cqw;width:16.41cqw;border-radius:1.25cqw;background:#fff;padding:1.562cqw 0.9375cqw}
.ec-sub li{position:relative;height:3.125cqw;display:flex;align-items:center;padding-left:2.734cqw;font-size:0.9375cqw;color:#222}
.ec-sub li.on{height:2.969cqw;margin-bottom:0.1562cqw;border-radius:0.7812cqw;background:#EFEFF1;font-weight:600;color:#000}
.ec-sub li.on::before{content:"";position:absolute;left:0;top:0.625cqw;width:0.2344cqw;height:1.719cqw;border-radius:0.1562cqw;background:#000}


.ec-kpi{left:39.06cqw;top:10.16cqw;width:57.81cqw;height:5.781cqw;display:grid;grid-template-columns:repeat(4,1fr)}
.ec-kpi > div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.4688cqw}
.ec-kpi > div + div{border-left:1px solid #E3E3E3}
.ec-kpi p{display:flex;align-items:center;gap:0.7812cqw;font-size:3.281cqw;font-weight:300;line-height:1}
.ec-kpi p .i{width:2.656cqw;height:2.656cqw;stroke-width:1.2;color:#BDBDBD}
.ec-kpi span{display:flex;align-items:center;gap:0.4688cqw;font-size:1.016cqw;color:#888}
.ec-kpi span i{width:0.5469cqw;height:0.5469cqw;border-radius:50%;background:currentColor}
.ec-kpi .es-on span i{background:#3DBF5A}.ec-kpi .es-on p .i{color:#333}
.ec-kpi .es-car p{color:#D41111}.ec-kpi .es-car p .i{color:#222}.ec-kpi .es-car span i{background:#D41111}
.ec-kpi .es-off p{color:#C9C9C9}.ec-kpi .es-off span i{background:#BDBDBD}
.ec-bar{left:39.06cqw;top:17.89cqw;width:57.81cqw;height:3.359cqw;display:flex;gap:0.9375cqw}
.ec-bar > *{display:flex;align-items:center;gap:0.625cqw;border-radius:0.9375cqw;background:#fff;box-shadow:inset 0 0 0 1px #E4E4E6;font-size:1.016cqw}
.ec-bar .es-et{width:9.531cqw;padding-left:1.406cqw;font-weight:500}
.ec-bar .es-et .i{width:1.25cqw;height:1.25cqw}
.ec-bar .es-bus{flex:1;padding-left:1.094cqw;color:#AAA;font-size:0.9375cqw}
.ec-bar .es-bus .i{width:1.25cqw;height:1.25cqw;color:#BBB}
.ec-bar .es-add{width:12.89cqw;height:3.125cqw;margin-top:0.07812cqw;justify-content:center;border-radius:0.625cqw;background:#000;box-shadow:none;color:#fff;font-weight:500}
.ec-tab{left:39.06cqw;top:22.27cqw;width:57.81cqw;height:50cqw;border-radius:1.719cqw;background:#fff}
.ec-tab .ec-cab,.ec-tab .ec-fila{display:grid;grid-template-columns:27.34cqw 9.375cqw 12.5cqw 1fr;align-items:center}
.ec-tab .ec-cab{height:1.562cqw;margin-top:3.672cqw;font-size:0.8594cqw;font-weight:700;letter-spacing:.08em;color:#888;text-transform:uppercase}
.ec-tab .ec-cab span{display:flex;align-items:center;gap:0.625cqw}
.ec-tab .ec-cab span:nth-child(1){justify-content:center}.ec-tab .ec-cab span:nth-child(2){justify-content:center}
.ec-tab .ec-cab span:nth-child(4){justify-content:flex-end;padding-right:2.188cqw;color:#888}
.ec-tab .ec-cab .i{width:1.172cqw;height:1.172cqw;color:#111;stroke-width:2}
.ec-tab .ec-filas{margin-top:1.562cqw}
.ec-tab .ec-fila{position:relative;height:7.109cqw;border-bottom:1px solid #D9D9D9}
.ec-tab .ec-fila:last-child{border-bottom:0}
.ec-tab .ec-nom{display:flex;align-items:center;gap:0.9375cqw;padding-left:2.344cqw}
.ec-tab .ec-nom b{display:block;font-size:1.094cqw}
.ec-tab .ec-nom span{display:block;margin-top:0.4688cqw;font-size:0.9375cqw;color:#111}
.ec-tab .ec-nom em{position:absolute;left:14.22cqw;top:4.688cqw;display:flex;align-items:center;gap:0.3125cqw;font-size:0.9375cqw;color:#666}
.ec-tab .ec-nom em .i{width:1.016cqw;height:1.016cqw;color:#AAA}
.ec-tab .ec-ver{text-align:center;font-size:0.9375cqw}
.ec-tab .ec-est{position:relative;height:1.562cqw;font-size:1.016cqw;color:#555}
.ec-tab .ec-est span{position:absolute;left:0;top:0.1562cqw;display:flex;align-items:center;gap:0.625cqw}
.ec-tab .ec-est i{width:0.625cqw;height:0.625cqw;border-radius:50%;background:#555}
.ec-tab .ec-est .es-v i{background:#3DBF5A}.ec-tab .ec-est .es-c i{background:#D41111}
.ec-tab .ec-det{display:flex;justify-content:flex-end;align-items:center;gap:0.7812cqw;padding-right:3.594cqw;color:#999}
.ec-tab .ec-det .i{width:1.719cqw;height:1.719cqw;stroke-width:1.3}
.ec-tab .ec-ocpp{padding:0.2344cqw 0.3125cqw;border-radius:0.2344cqw;background:#111;color:#fff;font-size:0.5469cqw;font-weight:700;letter-spacing:.04em}


.ec-sub.es-pay li:not(.on){height:3.125cqw}
.ec-pk{top:9.766cqw;width:18.36cqw;height:13.28cqw;border-radius:1.094cqw;background:#fff;padding:1.562cqw 1.875cqw}
.ec-pk > i{display:grid;place-items:center;width:3.438cqw;height:3.438cqw;border-radius:50%;background:#EBEBEB;color:#9A9A9A}
.ec-pk > i .i{width:1.562cqw;height:1.562cqw}
.ec-pk > span{display:block;margin-top:1.094cqw;font-size:1.016cqw;color:#555}
.ec-pk b{display:block;margin-top:0.7031cqw;font-size:2.188cqw;font-weight:700;letter-spacing:-.01em}
.ec-pk b small{font-size:.7em;font-weight:600;margin-left:.15em}
.ec-pk em{display:block;margin-top:0.7812cqw;font-size:0.7812cqw;font-style:normal;color:#555}
.ec-gr{left:39.3cqw;top:24.38cqw;width:39.06cqw;height:34.53cqw;border-radius:1.094cqw;background:#fff}
.ec-gr > b,.ec-es > b{position:absolute;left:1.875cqw;top:2.344cqw;font-size:0.9375cqw;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.ec-gr .ec-seg{right:1.719cqw;top:1.562cqw;display:flex;padding:0.2344cqw;border-radius:0.625cqw;background:#F2F2F4;font-size:0.9375cqw;color:#888}
.ec-gr .ec-seg span{padding:0.4688cqw 0.8594cqw;border-radius:0.4688cqw}
.ec-gr .ec-seg span:first-child{background:#fff;color:#111;font-weight:600;box-shadow:0 0.07812cqw 0.1562cqw rgba(0,0,0,.08)}
.ec-gr hr,.ec-es hr{position:absolute;left:1.875cqw;right:1.875cqw;top:5.312cqw;border:0;border-top:1px solid #E3E3E3}
.ec-gr svg.ec-plot{position:absolute;left:4.844cqw;top:7.188cqw;width:30cqw;height:17.66cqw;overflow:visible}
.ec-gr .ec-ej{position:absolute;top:6.562cqw;display:flex;flex-direction:column;justify-content:space-between;height:18.91cqw;font-size:0.8594cqw;color:#555}
.ec-gr .ec-ej.es-iz{left:1.562cqw;align-items:flex-end;width:2.656cqw}.ec-gr .ec-ej.es-de{left:35.62cqw}
.ec-gr .ec-x{left:4.844cqw;top:26.25cqw;width:30cqw;display:flex;justify-content:space-around;font-size:0.8594cqw;color:#555}
.ec-gr .ec-ley{left:1.875cqw;top:29.53cqw;display:flex;gap:0.625cqw}
.ec-gr .ec-ley span{display:flex;align-items:center;gap:0.4688cqw;padding:0.3906cqw 0.7812cqw;border-radius:78.05cqw;box-shadow:inset 0 0 0 1px #CFCFCF;font-size:0.7812cqw;color:#555}
.ec-gr .ec-ley i{width:0.7031cqw;height:0.7031cqw;border-radius:0.1562cqw;background:#111}.ec-gr .ec-ley span + span i{background:#BDBDBD}
.ec-plot line{stroke:#E6E6E6;stroke-width:1;vector-effect:non-scaling-stroke}
.ec-plot rect{fill:#E2E2E2}
.ec-plot .es-l{fill:none;stroke:#111;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ec-plot .es-ar{fill:#111;fill-opacity:.05}
.ec-es{left:79.61cqw;top:24.38cqw;width:17.27cqw;height:34.53cqw;border-radius:1.094cqw;background:#fff}
.ec-es > span{position:absolute;left:1.875cqw;top:3.906cqw;font-size:0.7812cqw;color:#555}
.ec-es > hr{top:5.938cqw}
.ec-es svg{position:absolute;left:3.125cqw;top:10.62cqw;width:11.02cqw;height:11.02cqw;transform:rotate(-90deg)}
.ec-es circle{fill:none;stroke-width:15}
.ec-es .ec-tot{left:0;right:0;top:14.53cqw;text-align:center}
.ec-es .ec-tot b{display:block;font-size:1.875cqw;font-weight:700}
.ec-es .ec-tot span{display:block;margin-top:0.2344cqw;font-size:0.7031cqw;color:#555;letter-spacing:.04em}
.ec-es .ec-ley{left:1.875cqw;top:25.78cqw;display:flex;flex-direction:column;gap:0.7031cqw;font-size:0.8594cqw;color:#555}
.ec-es .ec-ley span{display:flex;align-items:center;gap:0.5469cqw}
.ec-es .ec-ley i{width:0.7031cqw;height:0.7031cqw;border-radius:50%}
.ec-fil{left:39.3cqw;top:60.16cqw;width:57.58cqw;height:4.844cqw;border-radius:1.094cqw;background:#fff;display:flex;align-items:center;gap:0.7812cqw;padding:0 1.562cqw}
.ec-fil p{height:2.812cqw;display:flex;align-items:center;gap:0.625cqw;padding:0 1.094cqw;border-radius:0.4688cqw;box-shadow:inset 0 0 0 1px #CFCFCF;font-size:1.016cqw;color:#555}
.ec-fil p:nth-child(1){flex:1.6}.ec-fil p:nth-child(2){flex:1.2}.ec-fil p:nth-child(3){flex:.7}
.ec-fil .i{width:1.094cqw;height:1.094cqw}
.ec-fil p.es-exp{flex:none;width:10.94cqw;justify-content:center;border-radius:0.3125cqw;background:#000;box-shadow:none;color:#fff;font-weight:600}


.ec-biz{background:#F3F4F6;color:#111827}
.ec-biz .ec-hd{left:0;top:0;width:100cqw;height:5.547cqw;background:#fff;box-shadow:0 1px 0 #E5E7EB}
.ec-biz .ec-marca{left:4.688cqw;top:1.016cqw;width:6.719cqw;text-align:center;color:#000}
.ec-biz .ec-marca .ec-logo{width:4.531cqw;height:1.953cqw;margin:0 auto}
.ec-biz .ec-marca p{margin-top:0.2344cqw;font-size:0.8203cqw;font-weight:300}.ec-biz .ec-marca p b{font-weight:700}
.ec-biz .ec-nav{left:18.44cqw;top:1.328cqw;display:flex;gap:0.4688cqw}
.ec-biz .ec-nav span{display:flex;align-items:center;gap:0.5469cqw;height:2.891cqw;padding:0 0.9375cqw;border-radius:0.5469cqw;font-size:1.094cqw;color:#4B5563}
.ec-biz .ec-nav span.on{background:#111;color:#fff}
.ec-biz .ec-nav .i{width:1.25cqw;height:1.25cqw}
.ec-biz .ec-der{right:4.688cqw;top:1.094cqw;display:flex;align-items:center;gap:1.25cqw;font-size:1.016cqw}
.ec-biz .ec-der .es-es{display:flex;align-items:center;gap:0.4688cqw}
.ec-biz .ec-der .es-es i{width:1.406cqw;height:0.9375cqw;border-radius:0.1562cqw;background:linear-gradient(#C60B1E 25%,#FFC400 25% 75%,#C60B1E 75%)}
.ec-biz .ec-der .es-lu{width:1.406cqw;height:1.406cqw;color:#4B5563}
.ec-biz .ec-der .es-yo{display:flex;align-items:center;gap:0.7812cqw;height:3.281cqw;padding:0 0.9375cqw 0 0.4688cqw;border-radius:0.5469cqw;box-shadow:inset 0 0 0 1px #E5E7EB}
.ec-biz .ec-av{font-style:normal;display:grid;place-items:center;width:2.344cqw;height:2.344cqw;border-radius:50%;background:#F3F4F6;font-size:0.9375cqw;font-weight:600}
.ec-biz .ec-der .es-mail{width:9.219cqw;overflow:hidden}
.ec-biz .ec-der .es-yo .i{width:1.25cqw;height:1.25cqw}
.ec-biz h4{position:absolute;left:4.688cqw;top:8.047cqw;font-size:2.344cqw;font-weight:700;letter-spacing:-.01em}
.ec-biz .ec-h4s{left:4.688cqw;top:11.64cqw;font-size:1.172cqw;color:#6B7280}
.ec-biz .ec-add{right:4.688cqw;top:8.125cqw;display:flex;align-items:center;gap:0.7031cqw;height:3.125cqw;padding:0 1.562cqw;border-radius:0.5469cqw;background:#1F2937;color:#fff;font-size:1.172cqw;font-weight:500}
.ec-biz .ec-add .i{width:1.406cqw;height:1.406cqw;stroke-width:2}
.ec-biz .ec-bk{top:15cqw;width:29.38cqw;height:7.656cqw;border-radius:0.9375cqw;background:#fff;box-shadow:inset 0 0 0 1px #E5E7EB,0 0.07812cqw 0.1562cqw rgba(0,0,0,.04)}
.ec-biz .ec-bk > i{position:absolute;left:1.562cqw;top:1.641cqw;display:grid;place-items:center;width:4.375cqw;height:4.375cqw;border-radius:0.7812cqw;background:#F3F4F6;color:#111}
.ec-biz .ec-bk > i .i{width:1.875cqw;height:1.875cqw}
.ec-biz .ec-bk b{position:absolute;left:7.188cqw;top:1.719cqw;font-size:2.031cqw;font-weight:700}
.ec-biz .ec-bk span{position:absolute;left:7.188cqw;top:4.844cqw;font-size:1.016cqw;color:#4B5563}
.ec-biz .ec-bt{left:4.688cqw;top:24.61cqw;width:90.62cqw;border-radius:0.9375cqw;background:#fff;box-shadow:inset 0 0 0 1px #E5E7EB;overflow:hidden}
.ec-biz .ec-bt-h{position:relative;height:6.875cqw}
.ec-biz .ec-bt-h b{position:absolute;left:1.875cqw;top:2.578cqw;font-size:1.406cqw}
.ec-biz .ec-bt-h p{position:absolute;right:5.938cqw;top:1.562cqw;width:23.44cqw;height:3.672cqw;display:flex;align-items:center;padding-left:3.438cqw;border-radius:0.4688cqw;box-shadow:inset 0 0 0 1px #D1D5DB;font-size:1.094cqw;color:#9CA3AF}
.ec-biz .ec-bt-h > i{position:absolute;right:1.875cqw;top:1.875cqw;display:grid;place-items:center;width:3.125cqw;height:3.125cqw;border-radius:0.4688cqw;box-shadow:inset 0 0 0 1px #D1D5DB;color:#374151}
.ec-biz .ec-bt-h > i .i{width:1.25cqw;height:1.25cqw}
.ec-biz .ec-bc,.ec-biz .ec-bf{display:grid;grid-template-columns:17.5cqw 12.5cqw 15.08cqw 18.44cqw 8.906cqw 1fr 3.125cqw;align-items:center;padding-left:1.562cqw}
.ec-biz .ec-bc{height:6.016cqw;background:#F9FAFB;box-shadow:inset 0 1px 0 #E5E7EB,inset 0 -1px 0 #E5E7EB;font-size:0.9375cqw;font-weight:600;letter-spacing:.05em;color:#4B5563;text-transform:uppercase}
.ec-biz .ec-bc span{display:flex;align-items:center;gap:0.625cqw}
.ec-biz .ec-bc .i{width:1.016cqw;height:1.016cqw;color:#111}
.ec-biz .ec-bf{height:5.781cqw;box-shadow:inset 0 -1px 0 #E5E7EB;font-size:1.094cqw}
.ec-biz .ec-emp{display:flex;align-items:center;gap:0.9375cqw}
.ec-biz .ec-emp .ec-av{width:3.125cqw;height:3.125cqw;font-size:1.094cqw}
.ec-biz .ec-emp span{display:block;margin-top:0.3125cqw;font-size:1.016cqw;color:#6B7280}
.ec-biz .ec-id{font-weight:500}
.ec-biz .ec-sw{position:relative;display:block;width:3.281cqw;height:1.875cqw;border-radius:0.9375cqw;background:#111}
.ec-biz .ec-sw::after{content:"";position:absolute;left:1.641cqw;top:0.2344cqw;width:1.406cqw;height:1.406cqw;border-radius:50%;background:#fff;box-shadow:0 0.07812cqw 0.1562cqw rgba(0,0,0,.2)}
.ec-biz .ec-re{display:flex;align-items:center;gap:0.625cqw;color:#6B7280}
.ec-biz .ec-re i{display:grid;place-items:center;width:4.688cqw;height:2.969cqw;border-radius:0.4688cqw;box-shadow:inset 0 0 0 1px #D1D5DB;font-style:normal;color:#111}
.ec-biz .ec-ta{display:flex;align-items:center;justify-content:space-between;width:10.94cqw;height:2.969cqw;padding:0 0.7812cqw 0 1.25cqw;border-radius:0.4688cqw;box-shadow:inset 0 0 0 1px #D1D5DB}
.ec-biz .ec-ta .i{width:1.172cqw;height:1.172cqw}
.ec-biz .ec-km .i{width:1.562cqw;height:1.562cqw;color:#374151}
.ec-biz .ec-pie{display:flex;align-items:center;height:6.875cqw;padding:0 1.875cqw;font-size:1.094cqw;color:#4B5563}
.ec-biz .ec-pie > span:first-child{flex:1}
.ec-biz .ec-pie .es-pp{display:flex;align-items:center;gap:0.7812cqw;font-size:1.016cqw;margin-right:4.688cqw}
.ec-biz .ec-pie .es-pp i{display:flex;align-items:center;justify-content:space-between;width:6.562cqw;height:3.281cqw;padding:0 0.7812cqw 0 1.25cqw;border-radius:0.3125cqw;box-shadow:inset 0 0 0 1px #6B7280;font-style:normal;color:#111}
.ec-biz .ec-pie .es-pg{display:flex;gap:2.344cqw;color:#C4C8CE;font-size:1.25cqw}


.ec-ins{background:#F3F2EE;color:#1A1A2E}
.ec-ins .ec-iu{left:1.875cqw;top:1.328cqw;display:flex;align-items:center;gap:0.7812cqw}
.ec-ins .ec-iu .i{width:2.969cqw;height:2.969cqw;stroke-width:1.3;color:#555}
.ec-ins .ec-iu b{display:block;font-size:1.016cqw;font-weight:700;color:#111}
.ec-ins .ec-iu span{display:block;margin-top:0.3125cqw;font-size:0.8594cqw;color:#555}
.ec-ins .ec-il{left:1.094cqw;top:5.625cqw;width:19.53cqw;height:71.09cqw;border-radius:1.25cqw;background:#000;color:#fff;box-shadow:0 0 2.344cqw rgba(0,0,0,.18)}
.ec-ins .ec-il p{position:absolute;left:0;width:100%;height:3.906cqw;display:flex;align-items:center;padding-left:4.219cqw;font-size:1.172cqw;letter-spacing:.03em}
.ec-ins .ec-il p.on{top:3.828cqw;background:#2B2B2B}
.ec-ins .ec-il p.on::after{content:"";position:absolute;left:1.094cqw;top:4.297cqw;width:2.812cqw;height:0.1562cqw;background:#D41111}
.ec-ins .ec-il p.es-sal{top:8.75cqw;color:#DDD}
.ec-ins h4{position:absolute;left:22.97cqw;top:4.062cqw;font-size:2.812cqw;font-weight:800;letter-spacing:-.01em}
.ec-ins .ec-ih{left:22.97cqw;top:7.891cqw;font-size:1.016cqw;color:#8A8A8A;letter-spacing:.02em}
.ec-ins .ec-ib{top:11.41cqw;height:3.438cqw;display:flex;align-items:center;gap:0.7031cqw;border-radius:1.719cqw;font-size:1.016cqw}
.ec-ins .ec-ib.es-1{left:22.97cqw;width:21.64cqw;padding-left:1.328cqw;box-shadow:inset 0 0 0 1px #DEDCD6;color:#9A9A9A}
.ec-ins .ec-ib.es-1 b{color:#1A1A2E;font-size:1.094cqw}
.ec-ins .ec-ib.es-2{left:45.47cqw;width:34.38cqw;padding-left:1.094cqw;background:#fff;box-shadow:inset 0 0 0 1px #E6E4DF;color:#9A9A9A}
.ec-ins .ec-ib.es-2 .i{width:1.328cqw;height:1.328cqw;color:#666}
.ec-ins .ec-ib.es-2 i{position:absolute;right:0.3906cqw;top:0.3906cqw;width:2.656cqw;height:2.656cqw;border-radius:50%;background:#1C1B3A}
.ec-ins .ec-ib.es-3{left:84.22cqw;width:14.22cqw;justify-content:center;background:#1C1B3A;color:#fff;font-size:1.094cqw;font-weight:600}
.ec-ins .ec-it{left:22.97cqw;top:16.48cqw;width:75.47cqw;height:30cqw;border-radius:1.25cqw 1.25cqw 0 0;background:#fff}
.ec-ins .ec-it > b{position:absolute;left:1.875cqw;top:1.719cqw;font-size:1.25cqw}
.ec-ins .ec-it > span{position:absolute;left:1.875cqw;top:3.516cqw;font-size:0.9375cqw;color:#9A9A9A}
.ec-ins .ec-fx{right:1.875cqw;top:1.797cqw;display:flex;gap:0.625cqw}
.ec-ins .ec-fx span{height:2.5cqw;display:flex;align-items:center;padding:0 1.25cqw;border-radius:1.25cqw;box-shadow:inset 0 0 0 1px #DEDCD6;font-size:1.016cqw;color:#444}
.ec-ins .ec-fx span.on{background:#1C1B3A;box-shadow:none;color:#fff;font-weight:600}
.ec-ins .ec-ic,.ec-ins .ec-if{display:grid;grid-template-columns:40.62cqw 10.16cqw 13.28cqw 1fr;align-items:center;padding-left:1.25cqw}
.ec-ins .ec-ic{position:absolute;left:0;right:0;top:6.641cqw;height:2.266cqw;box-shadow:inset 0 -1px 0 #E8E6E1;font-size:0.8594cqw;font-weight:600;letter-spacing:.1em;color:#777;text-transform:uppercase}
.ec-ins .ec-ifs{position:absolute;left:0;right:0;top:8.906cqw}
.ec-ins .ec-if{position:relative;height:6.094cqw;box-shadow:inset 0 -1px 0 #E8E6E1}
.ec-ins .ec-in{display:flex;align-items:center;gap:0.9375cqw}
.ec-ins .ec-in .ec-th{width:3.438cqw;height:3.438cqw;border-radius:0.625cqw;background-color:#F2F2F2}
.ec-ins .ec-in b{display:block;font-size:1.016cqw;color:#1A1A2E}
.ec-ins .ec-in p{display:flex;align-items:center;gap:0.5469cqw;margin-top:0.5469cqw;font-size:0.8594cqw;color:#9A9A9A}
.ec-ins .ec-in p .i{width:1.172cqw;height:1.172cqw;color:#333;stroke-width:1.3}
.ec-ins .ec-in p em{padding:0.2344cqw 0.7031cqw;border-radius:0.7812cqw;box-shadow:inset 0 0 0 1px #DEDCD6;font-size:0.7812cqw;font-style:normal;font-weight:600;color:#444}
.ec-ins .ec-iv{font-size:0.8594cqw;color:#9A9A9A}
.ec-ins .ec-ie{position:relative;height:1.875cqw}
.ec-ins .ec-ie span{position:absolute;left:0;top:0;height:1.875cqw;display:flex;align-items:center;padding:0 0.7812cqw;border-radius:0.9375cqw;font-size:0.9375cqw;font-weight:600}
.ec-ins .ec-ie .es-v{background:#EAF8EE;box-shadow:inset 0 0 0 0.1172cqw #2FB45A;color:#2FB45A}
.ec-ins .ec-ie .es-o{background:#F2F2F2;box-shadow:inset 0 0 0 0.1172cqw #6B6B6B;color:#555}
.ec-ins .ec-id{display:flex;gap:1.094cqw;color:#9A9A9A}
.ec-ins .ec-id .i{width:1.562cqw;height:1.562cqw;stroke-width:1.3}
.ec-ins .ec-id .es-w{position:relative;width:1.562cqw;height:1.562cqw}
.ec-ins .ec-id .es-w .i{position:absolute;left:0;top:0}
.ec-ins .ec-pg{left:0;right:0;bottom:0.625cqw;display:flex;justify-content:center;gap:0.625cqw}
.ec-ins .ec-pg span{display:grid;place-items:center;width:2.5cqw;height:2.5cqw;border-radius:0.4688cqw;box-shadow:inset 0 0 0 1px #EEE;font-size:0.8594cqw;color:#CCC}
.ec-ins .ec-pg span.on{background:#1C1B3A;box-shadow:none;color:#fff;font-weight:700}
.ec-ins .ec-dn{top:47.42cqw;width:37.11cqw;height:22.66cqw;border-radius:1.25cqw;background:#fff}
.ec-ins .ec-dn > b{position:absolute;left:1.875cqw;top:1.875cqw;font-size:1.172cqw}
.ec-ins .ec-dn > span{position:absolute;left:1.875cqw;top:3.672cqw;font-size:0.9375cqw;color:#9A9A9A}
.ec-ins .ec-dn svg{position:absolute;left:2.188cqw;top:7.344cqw;width:10.16cqw;height:10.16cqw;transform:rotate(-90deg)}
.ec-ins .ec-dn circle{fill:none;stroke-width:13;stroke-linecap:round}
.ec-ins .ec-dn .ec-pc{left:2.188cqw;top:10.86cqw;width:10.16cqw;text-align:center}
.ec-ins .ec-dn .ec-pc b{font-size:2.188cqw;font-weight:800}
.ec-ins .ec-dn .ec-pc b small{font-size:.45em;font-weight:600;margin-left:0.07812cqw}
.ec-ins .ec-dn .ec-pc > span{display:block;margin-top:0.2344cqw;font-size:0.8594cqw;color:#777}
.ec-ins .ec-dr{left:14.84cqw;right:1.875cqw;top:6.719cqw}
.ec-ins .ec-dr b{display:block;font-size:1.562cqw;font-weight:800}
.ec-ins .ec-dr > span{display:block;margin-top:0.3125cqw;font-size:0.8594cqw;color:#777}
.ec-ins .ec-dr u{display:block;height:0.2344cqw;margin:0.7812cqw 0 1.094cqw;border-radius:0.1562cqw;background:#E5E7EB;overflow:hidden;text-decoration:none}
.ec-ins .ec-dr u s{display:block;height:100%;border-radius:inherit;text-decoration:none}
.ec-ins .ec-dr p{padding-top:0.625cqw;box-shadow:inset 0 1px 0 #E5E7EB;font-size:0.8594cqw;color:#777}
.ec-ins .ec-dr p b{display:inline;font-size:1.25cqw;margin-right:0.4688cqw;color:#1A1A2E}


.ec .es-a{opacity:calc(1 - var(--ec-k))}.ec .es-b{opacity:var(--ec-k)}
.ec-cloud.es-k{--ec-car:calc(2 + var(--ec-k))}
.ec .ec-n.es-car{counter-reset:ecn var(--ec-car)}
.ec-pay{--ec-car2:calc(var(--ec-p) * 18);--ec-kwh:calc(var(--ec-p) * 162);--ec-c:calc(var(--ec-p) * 4860);--ec-eur:calc((var(--ec-p) * 4860 - 49.5) / 100);--ec-cts:calc(var(--ec-p) * 4860 - var(--ec-eur) * 100)}
.ec .ec-n.es-car2{counter-reset:ecn var(--ec-car2)}.ec .ec-n.es-kwh{counter-reset:ecn var(--ec-kwh)}.ec .ec-n.es-eur{counter-reset:ecn var(--ec-eur)}
.ec .ec-n.es-cts{counter-reset:ecn var(--ec-cts)}.ec .ec-n.es-cts::before{content:"," counter(ecn,decimal-leading-zero)}
.ec .ec-n.es-kwh::after{content:" "}
.ec-pay .ec-plot .es-l{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--ec-p))}
.ec-pay .ec-plot .es-ar{opacity:var(--ec-p)}
.ec-pay .ec-plot .es-bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--ec-p))}
.ec-pay .ec-es .es-don{opacity:var(--ec-p)}
.ec-biz{--ec-pag:calc(2 + var(--ec-k))}
.ec .ec-n.es-pag{counter-reset:ecn var(--ec-pag)}
.ec-biz .ec-sw.es-anim{background:color-mix(in srgb,#111 calc(var(--ec-k) * 100%),#D1D5DB)}
.ec-biz .ec-sw.es-anim::after{left:calc(0.2344cqw + var(--ec-k) * 1.406cqw)}
.ec-ins{--ec-pct:calc(33 + var(--ec-k) * 34);--ec-con:calc(1 + var(--ec-k));--ec-nc:calc(2 - var(--ec-k))}
.ec .ec-n.es-pct{counter-reset:ecn var(--ec-pct)}.ec .ec-n.es-con{counter-reset:ecn var(--ec-con)}.ec .ec-n.es-nc{counter-reset:ecn var(--ec-nc)}
.ec-ins .es-arc{stroke-dasharray:calc(33.3 + var(--ec-k) * 33.4) 100}
.ec-ins .es-bc{width:calc((33.3 + var(--ec-k) * 33.4) * 1%)}.ec-ins .es-bn{width:calc((66.7 - var(--ec-k) * 33.4) * 1%)}
@media(prefers-reduced-motion:no-preference){
  @keyframes ec-k{0%,22%{--ec-k:0}34%,84%{--ec-k:1}96%,100%{--ec-k:0}}
  @keyframes ec-p{0%,8%{--ec-p:0}62%,90%{--ec-p:1}98%,100%{--ec-p:0}}
  .ec.es-k{animation:ec-k 8s cubic-bezier(.45,0,.25,1) infinite}
  .ec.es-p{animation:ec-p 10s cubic-bezier(.3,0,.25,1) infinite}
  .trydan-eco2__it:nth-child(2) .ec{animation-delay:-2s}.trydan-eco2__it:nth-child(3) .ec{animation-delay:-4s}.trydan-eco2__it:nth-child(4) .ec{animation-delay:-6s}
}

/* ═══ FIN ECOSISTEMA V2C · PORTALES REALES ═══ */

/* ═══ TRYDAN O TRYDAN PRO · v2 (generado por build_vs.py) ═══
   Un panel, dos productos, una comparacion. Los dos cargadores son la misma foto de producto:
   lo unico que cambia a la vista es el lector RFID del Pro, que es justo la diferencia. */
.trydan-vs2{
  /* estos tokens solo existen en los pop-ups (.trydan-pot): aqui se definen con los mismos valores */
  --t-fs-sec:clamp(.875rem,.8rem + .18vw,1rem);--t-fs-rot:clamp(.75rem,.72rem + .05vw,.8125rem);
  --t-tenue:#6F6D67;--t-hover:#B9B6B0;--t-sobre-acc:#1B1B18;
  background:#fff;padding-block:clamp(3rem,7vw,8.5rem);padding-inline:var(--t-gutter-sec,clamp(1.25rem,6vw,7.5rem));
}
/* con o sin el contenedor interior que mete el tema */
.trydan-vs2,.trydan-vs2>.wp-block-group__inner-container{display:flex;flex-direction:column;gap:clamp(1.75rem,3.4vw,3.25rem)}
.trydan-vs2__cab,.trydan-vs2__cab>.wp-block-group__inner-container{display:flex;flex-direction:column;gap:clamp(.75rem,1.4vw,1.25rem)}
.trydan-vs2 .trydan-h2{margin:0}
.trydan-vs2 .trydan-body{margin:0;max-width:62ch}

.trydan-vs2__panel{
  background:var(--t-bg);border-radius:var(--t-r-media);
  padding:clamp(2.5rem,6vw,6rem) clamp(1rem,4vw,4rem) clamp(1.5rem,4vw,3.5rem);
}
/* las dos tarjetas comparten filas (subgrid): el texto de una linea y el de dos no descuadran botones */
.trydan-vs2__mods{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1rem,5vw,5rem);
  max-width:46rem;margin-inline:auto;grid-template-rows:repeat(6,auto);
}
.trydan-vs2__mod{display:grid;grid-row:span 6;grid-template-rows:subgrid;justify-items:center;text-align:center;row-gap:0}

.trydan-vs2__foto{position:relative;margin:0 0 clamp(1.25rem,2.4vw,2rem);width:min(100%,19rem)}
.trydan-vs2__foto::after{
  content:"";position:absolute;left:14%;right:14%;bottom:2%;height:9%;z-index:0;
  background:radial-gradient(closest-side,rgba(0,0,0,.22),rgba(0,0,0,0));filter:blur(6px);
}
.trydan-vs2__foto img{position:relative;z-index:1;display:block;width:100%;height:auto}

.trydan-lp .trydan-vs2__n{margin:0;font-size:clamp(1.25rem,1rem + .9vw,1.75rem);font-weight:500;letter-spacing:-.015em;line-height:1.2;color:var(--t-ink)}
.trydan-lp .trydan-vs2__d{margin:.6rem 0 0;max-width:24ch;font-size:var(--t-fs-sec);line-height:1.5;color:var(--t-body);text-wrap:balance}
.trydan-lp .trydan-vs2__aqui{margin:clamp(1.25rem,2.4vw,1.75rem) 0 .6rem;min-height:1em;font-size:var(--t-fs-rot);color:var(--t-tenue)}
.trydan-vs2__btn{
  align-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.6rem;
  border-radius:var(--t-r-pill);font-size:var(--t-fs-sec);font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background-color .2s var(--t-ease),color .2s var(--t-ease),box-shadow .2s var(--t-ease);
}
.trydan-vs2__btn.is-acc{background:var(--t-accent);color:var(--t-sobre-acc)}
.trydan-vs2__btn.is-acc:hover{background:var(--t-accent-dark)}
.trydan-vs2__btn.is-linea{box-shadow:inset 0 0 0 1px var(--t-ink);color:var(--t-ink)}
.trydan-vs2__btn.is-linea:hover{background:var(--t-ink);color:#fff}
.trydan-vs2__btn:focus-visible,.trydan-vs2__link:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
.trydan-lp a.trydan-vs2__link,.trydan-lp span.trydan-vs2__link{margin-top:.9rem;font-size:var(--t-fs-rot);font-weight:600;color:var(--t-ink);text-decoration:underline;text-underline-offset:.25em;min-height:1em}
.trydan-lp a.trydan-vs2__link:hover{color:var(--t-accent-dark)}


@media(max-width:47.999rem){
  .trydan-vs2__btn{padding:0 1.1rem;min-height:2.5rem;font-size:.8125rem}
  .trydan-lp .trydan-vs2__d{font-size:.8125rem}
}
/* «Ver todas las diferencias»: abre el pop-up con la tabla completa */
.trydan-lp .trydan-vs2__mas{margin:clamp(2.25rem,4.5vw,3.5rem) 0 0;text-align:center}
.trydan-lp a.trydan-vs2__ver{
  display:inline-flex;align-items:center;gap:.6em;min-height:2.75rem;padding:0 1.5rem;border-radius:var(--t-r-pill);
  box-shadow:inset 0 0 0 1px rgba(46,46,42,.18);color:var(--t-ink);font-size:var(--t-fs-sec);font-weight:600;text-decoration:none;
  transition:box-shadow .2s var(--t-ease),background-color .2s var(--t-ease);
}
.trydan-lp a.trydan-vs2__ver::after{content:"+";font-size:1.25em;font-weight:400;line-height:1}
.trydan-lp a.trydan-vs2__ver:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--t-ink)}
.trydan-lp a.trydan-vs2__ver:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}

/* Estados de los enlaces: el tema subraya y recolorea todo a:hover; aqui se manda de verdad */
.trydan-lp.trydan-vs2 a.trydan-vs2__btn,
.trydan-lp.trydan-vs2 a.trydan-vs2__btn:is(:hover,:focus,:active,:visited),
.trydan-lp.trydan-vs2 a.trydan-vs2__ver,
.trydan-lp.trydan-vs2 a.trydan-vs2__ver:is(:hover,:focus,:active,:visited){text-decoration:none}
.trydan-lp.trydan-vs2 a.trydan-vs2__btn.is-acc,.trydan-lp.trydan-vs2 a.trydan-vs2__btn.is-acc:visited{background:var(--t-accent);color:var(--t-sobre-acc)}
.trydan-lp.trydan-vs2 a.trydan-vs2__btn.is-acc:hover{background:var(--t-accent-dark);color:var(--t-sobre-acc)}
.trydan-lp.trydan-vs2 a.trydan-vs2__btn.is-linea,.trydan-lp.trydan-vs2 a.trydan-vs2__btn.is-linea:visited{background:transparent;color:var(--t-ink)}
.trydan-lp.trydan-vs2 a.trydan-vs2__btn.is-linea:hover{background:var(--t-ink);color:#fff}
.trydan-lp.trydan-vs2 a.trydan-vs2__ver,.trydan-lp.trydan-vs2 a.trydan-vs2__ver:visited{color:var(--t-ink)}
.trydan-lp.trydan-vs2 a.trydan-vs2__ver:hover{background:#fff;color:var(--t-ink);box-shadow:inset 0 0 0 1px var(--t-ink)}
.trydan-lp.trydan-vs2 a.trydan-vs2__ver::after{transition:transform .3s var(--t-ease)}
.trydan-lp.trydan-vs2 a.trydan-vs2__ver:hover::after{transform:rotate(90deg)}
.trydan-lp.trydan-vs2 a.trydan-vs2__link,.trydan-lp.trydan-vs2 a.trydan-vs2__link:visited{color:var(--t-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .2s var(--t-ease)}
.trydan-lp.trydan-vs2 a.trydan-vs2__link:hover{color:var(--t-accent-dark);text-decoration:underline;text-decoration-thickness:1px}
.trydan-lp.trydan-vs2 a:is(.trydan-vs2__btn,.trydan-vs2__ver,.trydan-vs2__link):focus{outline:none}
.trydan-lp.trydan-vs2 a:is(.trydan-vs2__btn,.trydan-vs2__ver,.trydan-vs2__link):focus-visible{outline:2px solid var(--t-ink);outline-offset:3px}

/* el pop-up: mas estrecho que los otros, es una tabla de dos columnas */
#dlg-diferencias .trydan-pot__panel{width:min(100%,54rem)}
.trydan-lp .trydan-dif{padding:clamp(.5rem,2vw,1.5rem) var(--t-pad) var(--t-pad)}
.trydan-lp .trydan-dif__t{width:100%;margin:0;border:0;border-collapse:separate;border-spacing:0;table-layout:fixed;background:none}
.trydan-lp .trydan-dif__t :is(th,td){border:0;background:none;padding:.9rem .5rem;text-align:center;vertical-align:middle;font-size:var(--t-fs-sec);line-height:1.4;color:var(--t-ink)}
.trydan-lp .trydan-dif__t thead :is(th,td){position:sticky;top:0;z-index:1;background:var(--t-panel);padding-top:1.25rem;padding-bottom:1rem;box-shadow:0 1px 0 var(--t-linea)}
.trydan-lp .trydan-dif__t thead th{font-size:clamp(1rem,.9rem + .4vw,1.25rem);font-weight:500;letter-spacing:-.01em}
.trydan-lp .trydan-dif__foto{display:block;width:clamp(4rem,9vw,6.5rem);margin:0 auto .5rem}
.trydan-lp .trydan-dif__foto img{display:block;width:100%;height:auto}
.trydan-lp .trydan-dif__t thead td,.trydan-lp .trydan-dif__t tbody th[scope=row]{width:42%}
.trydan-lp .trydan-dif__t tbody th[scope=row]{text-align:left;font-weight:400;color:var(--t-body);padding-left:0}
.trydan-lp .trydan-dif__t tbody tr + tr :is(th,td){box-shadow:inset 0 1px 0 var(--t-linea)}
.trydan-lp .trydan-dif__t tr.trydan-dif__g th{
  padding:2.25rem 0 .5rem;text-align:left;font-size:var(--t-fs-rot);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-tenue);
}
.trydan-lp .trydan-dif__t tbody:first-of-type tr.trydan-dif__g th{padding-top:1.5rem}
.trydan-dif__si{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:middle;border-radius:50%;background:var(--t-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat}
.trydan-dif__no{display:inline-block;width:.9rem;height:1.5px;vertical-align:middle;background:var(--t-hover)}
.trydan-dif__opc{display:inline-block;padding:.3em .8em;border-radius:var(--t-r-pill);background:var(--t-relleno);font-size:var(--t-fs-rot);font-weight:600;color:var(--t-body)}
@media(max-width:47.999rem){
  .trydan-lp .trydan-dif__t :is(th,td){padding:.75rem .25rem;font-size:.8125rem}
  .trydan-lp .trydan-dif__t thead td,.trydan-lp .trydan-dif__t tbody th[scope=row]{width:40%}
}
/* ═══ FIN TRYDAN O TRYDAN PRO · v2 ═══ */

/* ═══ ESPECIFICACIONES E INSTALACION · v2 (generado por build_tec_ins.py) ═══ */
.trydan-tec2,.trydan-ins2{
  --t-fs-sec:clamp(.875rem,.8rem + .18vw,1rem);--t-fs-rot:clamp(.75rem,.72rem + .05vw,.8125rem);
  --t-tenue:#6F6D67;--t-sobre-acc:#1B1B18;
}
/* ── especificaciones: compacta ───────────────────────────────────────── */
.trydan-tec2{background:var(--t-bg);padding-block:clamp(3rem,6vw,6rem);padding-inline:var(--t-gutter-sec)}
.trydan-tec2__in{
  max-width:64rem;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);
  column-gap:clamp(2rem,6vw,6rem);row-gap:1.25rem;
}
@media(min-width:48rem){.trydan-tec2__in{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}
.trydan-tec2__cab{grid-column:1 / -1;padding-bottom:.9rem;border-bottom:1px solid var(--t-linea)}
.trydan-lp .trydan-tec2__h{margin:0;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.125rem);font-weight:400;letter-spacing:-.015em;line-height:1.2;color:var(--t-ink)}
.trydan-tec2__izq{padding-top:.25rem}
.trydan-lp.trydan-tec2 a.trydan-tec2__pdf,.trydan-lp.trydan-tec2 a.trydan-tec2__pdf:is(:visited,:hover,:focus){
  display:inline-flex;align-items:center;gap:.6em;min-height:2.5rem;padding:0 1.25rem;border-radius:var(--t-r-pill);
  background:var(--t-ink);color:#fff;font-size:.8125rem;font-weight:600;text-decoration:none;
  transition:background-color .2s var(--t-ease);
}
.trydan-lp.trydan-tec2 a.trydan-tec2__pdf:hover{background:#000}
.trydan-lp.trydan-tec2 a.trydan-tec2__pdf svg{transition:transform .25s var(--t-ease)}
.trydan-lp.trydan-tec2 a.trydan-tec2__pdf:hover svg{transform:translateY(2px)}
.trydan-lp.trydan-tec2 a.trydan-tec2__pdf:focus-visible{outline:2px solid var(--t-ink);outline-offset:3px}

.trydan-tec2__acc{interpolate-size:allow-keywords}
.trydan-tec2__d{border-bottom:1px solid var(--t-linea)}
.trydan-tec2__d summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 0;cursor:pointer;font-size:var(--t-fs-sec);font-weight:500;color:var(--t-ink);
}
.trydan-tec2__d summary::-webkit-details-marker{display:none}
.trydan-tec2__d summary:focus-visible{outline:2px solid var(--t-ink);outline-offset:2px;border-radius:4px}
.trydan-tec2__chev{display:grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:50%;background:rgba(46,46,42,.07);color:var(--t-ink);transition:transform .3s var(--t-ease),background-color .2s}
.trydan-tec2__d summary:hover .trydan-tec2__chev{background:rgba(46,46,42,.13)}
.trydan-tec2__d[open] .trydan-tec2__chev{transform:rotate(180deg)}
.trydan-tec2__d::details-content{height:0;overflow:clip;transition:height .35s var(--t-ease),content-visibility .35s allow-discrete}
.trydan-tec2__d[open]::details-content{height:auto}
.trydan-tec2__cuerpo{padding:0 0 1rem}
.trydan-lp .trydan-tec2__sub{margin:.75rem 0 .25rem;font-size:var(--t-fs-rot);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t-tenue)}
.trydan-lp .trydan-tec2__cuerpo dl{margin:0}
.trydan-tec2__cuerpo dl div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1rem;padding:.5rem 0;border-top:1px solid rgba(46,46,42,.06)}
.trydan-tec2__cuerpo dl div:first-child{border-top:0}
.trydan-lp .trydan-tec2__cuerpo dt{margin:0;font-size:.875rem;font-weight:400;color:var(--t-body)}
.trydan-lp .trydan-tec2__cuerpo dd{margin:0;font-size:.875rem;color:var(--t-ink);text-align:right}

/* ── instalacion: naranja + foto ─────────────────────────────────────── */
.trydan-ins2{background:var(--t-bg);padding-block:clamp(2rem,5vw,5rem);padding-inline:var(--t-gutter-sec)}
.trydan-ins2__card{
  display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border-radius:var(--t-r-media);background:var(--t-accent);
  max-width:90rem;margin-inline:auto;
}
@media(min-width:56rem){.trydan-ins2__card{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:clamp(34rem,46vw,44rem)}}
.trydan-ins2__txt{display:flex;flex-direction:column;padding:clamp(2rem,5.5vw,5.5rem);color:var(--t-sobre-acc)}
.trydan-lp .trydan-ins2__h{margin:0;max-width:20ch;font-size:clamp(1.75rem,1.1rem + 1.7vw,2.75rem);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--t-sobre-acc)}
.trydan-lp .trydan-ins2__h span{display:block;font-weight:300;color:rgba(27,27,24,.62)}
.trydan-lp .trydan-ins2__cta{margin:clamp(1.5rem,3vw,2.25rem) 0 0}
.trydan-lp.trydan-ins2 a.trydan-ins2__btn,.trydan-lp.trydan-ins2 a.trydan-ins2__btn:is(:visited,:hover,:focus){
  display:inline-flex;align-items:center;min-height:2.875rem;padding:0 1.5rem;border-radius:var(--t-r-pill);
  background:#fff;color:var(--t-ink);font-size:var(--t-fs-sec);font-weight:600;text-decoration:none;
  transition:background-color .2s var(--t-ease),color .2s var(--t-ease);
}
.trydan-lp.trydan-ins2 a.trydan-ins2__btn:hover{background:var(--t-sobre-acc);color:#fff}
.trydan-lp.trydan-ins2 a.trydan-ins2__btn:focus-visible{outline:2px solid var(--t-sobre-acc);outline-offset:3px}
.trydan-ins2__ventajas{list-style:none;margin:auto 0 0;padding:clamp(2.5rem,6vw,4rem) 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem 3rem}
@media(min-width:40rem){.trydan-ins2__ventajas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trydan-ins2__ventajas li{margin:0}
.trydan-ins2__ventajas svg{display:block;margin-bottom:.9rem;color:var(--t-sobre-acc)}
.trydan-lp .trydan-ins2__ventajas h3{margin:0 0 .5rem;font-size:clamp(1.0625rem,.95rem + .4vw,1.3125rem);font-weight:500;letter-spacing:-.01em;line-height:1.25;color:var(--t-sobre-acc)}
.trydan-lp .trydan-ins2__ventajas p{margin:0;max-width:34ch;font-size:var(--t-fs-sec);line-height:1.55;color:rgba(27,27,24,.78)}
.trydan-ins2__foto{margin:0;position:relative;min-height:22rem}
.trydan-ins2__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
@media(max-width:55.999rem){
  .trydan-ins2__foto{order:-1;aspect-ratio:4 / 3;min-height:0}
  .trydan-ins2__foto img{object-position:50% 22%}
}
/* ═══ FIN ESPECIFICACIONES E INSTALACION · v2 ═══ */

/* ═══ IA · la demo (ia3) ══════════════════════════════════════════════════════
   Cinco peticiones; cada una lleva su respuesta justo detras en el marcado.
   Movil y tableta: acordeon, la respuesta se abre debajo de su peticion.
   Escritorio: la lista a la izquierda y la respuesta a la derecha. Los
   .trydan-ia3__it se disuelven (display:contents) para que boton y respuesta
   sean celdas del mismo grid, y todas las respuestas comparten celda: el alto
   lo fija la mas larga y nada salta al cambiar.
   La respuesta se lee como una conversacion: tu peticion en burbuja oscura y
   debajo contesta V2C Assistant, primero en prelayout y luego con el dato. */
.trydan-ia3,.trydan-ia3 *{box-sizing:border-box}
.trydan-ia3{
  --ia-r:20px;
  display:grid;grid-template-columns:minmax(0,1fr);
  background:#fff;border-radius:var(--ia-r);overflow:hidden;
  box-shadow:0 30px 80px -50px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.04);
}
.trydan-lp .trydan-ia3__lk{
  margin:0;padding:clamp(1.25rem,2.6vw,2rem) clamp(1.25rem,2.6vw,2rem) .75rem;
  font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-tenue);
}
.trydan-ia3__it{border-top:1px solid var(--t-linea)}
.trydan-lp .trydan-ia3__h{margin:0;font:inherit}

/* la peticion */
.trydan-lp button.trydan-ia3__tab{
  position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.5rem;align-items:baseline;
  width:100%;margin:0;padding:1.05rem clamp(1.25rem,2.6vw,2rem);text-align:left;cursor:pointer;
  font-family:inherit;letter-spacing:normal;text-transform:none;text-shadow:none;
  background:transparent;border:0;border-radius:0;color:var(--t-body);
  transition:color .25s var(--t-ease),background-color .25s var(--t-ease);
}
.trydan-lp button.trydan-ia3__tab:hover{color:var(--t-ink);background:transparent}
.trydan-lp button.trydan-ia3__tab:focus-visible{outline:2px solid var(--t-accent-dark);outline-offset:-4px;border-radius:var(--ia-r)}
.trydan-ia3__n{font-size:.75rem;font-weight:500;letter-spacing:.04em;color:var(--t-hover);font-variant-numeric:tabular-nums}
.trydan-ia3__tx{font-size:var(--t-fs-p);line-height:1.4}
.trydan-ia3__it.is-on .trydan-ia3__tab{color:var(--t-ink)}
.trydan-ia3__it.is-on .trydan-ia3__n{color:var(--t-accent-dark)}
.trydan-ia3__it.is-on .trydan-ia3__tx{font-weight:600}
/* el + del acordeon, que gira a - al abrir */
.trydan-ia3__mas{position:relative;width:.75rem;height:.75rem;align-self:center}
.trydan-ia3__mas::before,.trydan-ia3__mas::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;border-radius:2px;background:currentColor;transition:transform .3s var(--t-ease)}
.trydan-ia3__mas::after{transform:rotate(90deg)}
.trydan-ia3__it.is-on .trydan-ia3__mas::after{transform:rotate(0)}
/* la barra que se llena hasta pasar a la siguiente (solo escritorio, en automatico) */
.trydan-ia3__barra{display:none}

/* la respuesta */
.trydan-ia3__p{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem);padding:.25rem clamp(1.25rem,2.6vw,2rem) clamp(1.5rem,3vw,2.25rem)}
.trydan-ia3__p[hidden]{display:none}
.trydan-lp .trydan-ia3__ask{
  align-self:flex-end;display:flex;align-items:center;gap:.4rem;max-width:min(30rem,85%);margin:0;
  padding:.85rem 1.15rem;border-radius:var(--ia-r) var(--ia-r) 6px var(--ia-r);
  background:var(--t-ink);color:#fff;
}
.trydan-ia3__q{font-size:var(--t-fs-p);font-weight:500;line-height:1.4}
.trydan-ia3__caret{flex:none;width:2px;height:1.1em;background:currentColor;display:none}
.trydan-ia3.is-escribe .trydan-ia3__caret{display:block;animation:trydan-ia2-caret 1s step-end infinite}
.trydan-ia3__res{
  display:flex;flex-direction:column;gap:clamp(.85rem,1.5vw,1.15rem);
  align-self:flex-start;width:100%;max-width:40rem;margin-left:2.6rem;
  padding:clamp(1.1rem,2vw,1.5rem) clamp(1.15rem,2.2vw,1.6rem);
  border-radius:6px var(--ia-r) var(--ia-r) var(--ia-r);background:var(--t-sup,#F5F4F2);
}
.trydan-lp .trydan-ia3__quien{display:flex;align-items:center;gap:.6rem;margin:.25rem 0 -.35rem;font-size:var(--t-fs-sec);color:var(--t-ink)}
.trydan-ia3__quien b{font-weight:600}
.trydan-ia3__av{position:relative;flex:none;display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:999px;background:#A8D63D}
/* 06/11: icono oficial de V2C Assistant, igual que en /es/soporte/ (circulo #A8D63D, glifo #14140f) */
.trydan-ia3__chispa{display:none}
.trydan-ia3__av::before{content:"";width:1rem;height:1rem;background-color:#14140f;
  -webkit-mask:url(https://v2charge.com/wp-content/uploads/2026/08/icono-ia.png) center/contain no-repeat;
  mask:url(https://v2charge.com/wp-content/uploads/2026/08/icono-ia.png) center/contain no-repeat}
/* punto de estado de soporte: equilibra las estrellas de arriba a la izquierda */
.trydan-ia3__av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;box-sizing:border-box;
  border-radius:50%;background:#A8D63D;border:2px solid #fff;animation:trydan-ia3-punto 1.8s ease-out infinite}
@keyframes trydan-ia3-punto{0%{box-shadow:0 0 0 0 rgba(168,214,61,.7)}100%{box-shadow:0 0 0 6px rgba(168,214,61,0)}}
@media (prefers-reduced-motion:reduce){.trydan-ia3__av::after{animation:none}}
.trydan-ia3.is-pensando .trydan-ia3__av{animation:trydan-ia2-latido 1.1s ease-in-out infinite}
.trydan-ia3__st{
  margin-left:auto;font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-hover);
  transition:color .3s var(--t-ease);
}
.trydan-ia3.is-listo .trydan-ia3__st{color:var(--t-ink)}
.trydan-lp .trydan-ia3__rt{margin:0;font-size:clamp(1.25rem,1.1rem + .6vw,1.75rem);font-weight:400;line-height:1.25;letter-spacing:-.01em;color:var(--t-ink)}
.trydan-lp .trydan-ia3__rp{margin:0;max-width:52ch;font-size:var(--t-fs-p);line-height:1.6;color:var(--t-body);text-wrap:pretty}

/* los datos: filas dato / valor */
.trydan-ia3__campos{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border-top:1px solid var(--t-linea)}
.trydan-ia3__campos>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--t-linea)}
.trydan-ia3__campos dt{margin:0;font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-tenue)}
.trydan-ia3__campos dd{margin:0;font-size:clamp(1rem,.9rem + .4vw,1.25rem);font-weight:400;line-height:1.2;color:var(--t-ink);text-align:right}

/* la grafica de precios */
.trydan-ia3__horas{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;
  height:clamp(6rem,14vw,8.5rem);align-items:end;
}
.trydan-ia3__horas li{position:relative;height:100%;display:flex;align-items:flex-end}
.trydan-ia3__horas i{display:block;width:100%;height:var(--h);border-radius:3px 3px 0 0;background:#E2E0DB;transition:background-color .35s var(--t-ease)}
.trydan-ia3__horas .is-on i{background:var(--t-accent)}
.trydan-ia3__horas span{
  position:absolute;left:50%;top:100%;margin-top:.4rem;transform:translateX(-50%);white-space:nowrap;
  font-size:.625rem;letter-spacing:.06em;color:var(--t-tenue);font-variant-numeric:tabular-nums;
}
.trydan-lp .trydan-ia3__vent{margin:1.9rem 0 0;font-size:var(--t-fs-sec);font-weight:600;color:var(--t-accent-dark);font-variant-numeric:tabular-nums}
.trydan-lp .trydan-ia3__hecho{
  display:flex;align-items:center;gap:.6rem;margin:0;padding-top:.15rem;
  font-size:var(--t-fs-sec);color:var(--t-ink);
}
.trydan-ia3__hecho i{flex:none;width:.4rem;height:.4rem;border-radius:999px;background:var(--t-accent)}
.trydan-ia3:not(.is-listo) .trydan-ia3__hecho i{background:var(--t-hover)}

/* prelayout: la respuesta ocupa su sitio en barras grises con un brillo */
.trydan-ia3.is-pensando :is(.trydan-ia3__rt,.trydan-ia3__rp,.trydan-ia3__vent,.trydan-ia3__hecho,.trydan-ia3__campos dt,.trydan-ia3__campos dd,.trydan-ia3__horas span){
  color:transparent;
  background:linear-gradient(90deg,#E5E3DF 0 40%,#F0EEEB 50%,#E5E3DF 60% 100%) 0 0/250% 100%;
  animation:trydan-ia2-brillo 1.3s linear infinite;
}
.trydan-ia3.is-pensando :is(.trydan-ia3__rt,.trydan-ia3__vent,.trydan-ia3__hecho,.trydan-ia3__campos dt,.trydan-ia3__campos dd){width:fit-content;max-width:100%;border-radius:8px}
.trydan-ia3.is-pensando .trydan-ia3__campos dd{margin-left:auto}
.trydan-ia3.is-pensando .trydan-ia3__rp{
  -webkit-mask:repeating-linear-gradient(#000 0 1.05em,transparent 1.05em 1.6em) 0 .28em;
          mask:repeating-linear-gradient(#000 0 1.05em,transparent 1.05em 1.6em) 0 .28em;
}
.trydan-ia3.is-pensando .trydan-ia3__hecho i{opacity:0}
.trydan-ia3.is-pensando .trydan-ia3__horas i{background:#E5E3DF;animation:trydan-ia2-barra 1.3s ease-in-out infinite}
.trydan-ia3.is-pensando .trydan-ia3__horas li:nth-child(3n+2) i{animation-delay:-.4s}
.trydan-ia3.is-pensando .trydan-ia3__horas li:nth-child(3n) i{animation-delay:-.8s}
.trydan-ia3.is-pensando .trydan-ia3__st{animation:trydan-ia2-latido 1.1s ease-in-out infinite}
.trydan-ia3.is-listo :is(.trydan-ia3__rt,.trydan-ia3__rp,.trydan-ia3__vent,.trydan-ia3__hecho,.trydan-ia3__campos dd){animation:trydan-ia2-entra .5s var(--t-ease) both}
.trydan-ia3.is-listo .trydan-ia3__rp{animation-delay:.06s}
.trydan-ia3.is-listo :is(.trydan-ia3__vent,.trydan-ia3__campos dd){animation-delay:.12s}
.trydan-ia3.is-listo .trydan-ia3__hecho{animation-delay:.18s}
@keyframes trydan-ia2-caret{0%,45%{opacity:1}46%,100%{opacity:0}}
@keyframes trydan-ia2-brillo{to{background-position:-150% 0}}
@keyframes trydan-ia2-barra{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes trydan-ia2-latido{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes trydan-ia2-entra{from{opacity:0;transform:translateY(4px)}}
@keyframes trydan-ia3-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* movil: solo las horas pares de seis en seis */
@media(max-width:47.999rem){
  .trydan-ia3__horas li:nth-child(6n+4) span{display:none}
  .trydan-ia3__res{margin-left:0}
}

/* escritorio: lista a la izquierda, respuesta a la derecha */
@media(min-width:64rem){
  .trydan-ia3{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);grid-template-rows:repeat(6,auto) 1fr;column-gap:0}
  .trydan-lp .trydan-ia3__lk{grid-column:1;grid-row:1;padding:2.25rem 2rem 1rem}
  .trydan-ia3__it{display:contents;border:0}
  .trydan-lp .trydan-ia3__h{grid-column:1;padding:0 1rem;position:relative}
  .trydan-lp .trydan-ia3__h::before{content:"";position:absolute;left:2rem;right:2rem;top:0;border-top:1px solid var(--t-linea)}
  .trydan-ia3__it:first-of-type .trydan-ia3__h::before,.trydan-ia3__it.is-on .trydan-ia3__h::before,
  .trydan-ia3__it.is-on + .trydan-ia3__it .trydan-ia3__h::before{display:none}
  .trydan-lp button.trydan-ia3__tab{grid-template-columns:2rem minmax(0,1fr);padding:1rem 1rem;border-radius:var(--ia-r);overflow:hidden}
  .trydan-lp button.trydan-ia3__tab:hover{background:rgba(245,244,242,.6)}
  .trydan-ia3__it.is-on .trydan-ia3__tab,.trydan-lp .trydan-ia3__it.is-on button.trydan-ia3__tab:hover{background:var(--t-sup,#F5F4F2)}
  .trydan-ia3__mas{display:none}
  .trydan-ia3__barra{position:absolute;left:1rem;right:1rem;bottom:0;height:2px;border-radius:2px;background:var(--t-accent);transform-origin:left;transform:scaleX(0)}
  .trydan-ia3.is-auto .trydan-ia3__it.is-on .trydan-ia3__barra{display:block;transform:scaleX(var(--avance,0))}
  .trydan-ia3__p{grid-column:2;grid-row:1/-1;padding:clamp(2rem,3.4vw,3rem);border-left:1px solid var(--t-linea)}
  .trydan-ia3__p[hidden]{display:flex;visibility:hidden}
  .trydan-ia3__horas{height:8.5rem}
}

@media(prefers-reduced-motion:reduce){
  .trydan-ia3 *{animation:none!important;transition:none!important}
}
/* en movil, la pregunta tocada aterriza bajo la barra superior de la pagina */
.trydan-ia3__it{scroll-margin-top:calc(var(--t-aterrizaje,10rem) - 2rem)}

/* ═══ INSTALADOR OFICIAL · v3 (blanco, foto a la izquierda) ═══════════════════
   Tarjeta blanca de 20px. La foto va enmarcada dentro, con un sello de cristal;
   el texto a la derecha, el boton principal en tinta y uno secundario pequeno
   para quien quiere ser instalador. "Expertos en cargadores V2C" es el mismo
   texto de antes partido en tres puntos, en una caja calida. En movil la foto
   va arriba. */
.trydan-ins3,.trydan-ins3 *{box-sizing:border-box}
.trydan-ins3{
  display:grid;grid-template-columns:minmax(0,1fr);max-width:var(--t-max,80rem);margin:0 auto;
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px -50px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.04);
}
.trydan-lp .trydan-ins3__foto{position:relative;margin:10px 10px 0;height:clamp(18rem,80vw,24rem);border-radius:14px;overflow:hidden}
.trydan-ins3__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.trydan-ins3__sello{
  position:absolute;left:1.25rem;bottom:1.25rem;display:flex;align-items:center;gap:.6rem;
  padding:.5rem 1rem .5rem .5rem;border-radius:999px;
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.4);
  font-size:.8125rem;font-weight:600;line-height:1.2;color:var(--t-ink);
}
.trydan-ins3__sello-ic{display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--t-accent);color:#fff}
.trydan-ins3 svg{display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trydan-ins3__sello-ic svg{width:1.25rem;height:1.25rem}

.trydan-ins3__txt{display:flex;flex-direction:column;justify-content:center;padding:1.9rem 1.75rem 1.75rem}
.trydan-lp .trydan-ins3__eb{margin:0;font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--t-accent-dark)}
.trydan-lp .trydan-ins3__h{margin:.9rem 0 0;max-width:14ch;font-size:clamp(1.875rem,1.2rem + 2vw,2.875rem);font-weight:400;line-height:1.12;letter-spacing:-.01em;color:var(--t-ink);text-wrap:balance}

.trydan-lp .trydan-ins3__cta{display:flex;flex-direction:column;align-items:stretch;gap:.875rem;margin:2rem 0 0}
.trydan-lp a.trydan-ins3__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.65rem;border-radius:999px;
  background:var(--t-ink);color:#fff;font-size:.9375rem;font-weight:600;line-height:1.2;text-decoration:none;
  transition:background-color .25s var(--t-ease);
}
.trydan-lp a.trydan-ins3__btn:hover{background:#000;color:#fff;text-decoration:none}
.trydan-ins3__btn svg{width:.875rem;height:.875rem;stroke-width:2;transition:transform .25s var(--t-ease)}
.trydan-lp a.trydan-ins3__btn:hover svg{transform:translateX(3px)}
.trydan-lp a.trydan-ins3__sec{
  align-self:center;display:inline-flex;align-items:center;padding:.55rem 1rem;border-radius:999px;
  border:1px solid rgba(46,46,42,.25);color:var(--t-ink);font-size:.8125rem;font-weight:500;line-height:1.2;text-decoration:none;
  transition:border-color .25s var(--t-ease);
}
.trydan-lp a.trydan-ins3__sec:hover{border-color:var(--t-ink);color:var(--t-ink);text-decoration:none}
.trydan-lp :is(a.trydan-ins3__btn,a.trydan-ins3__sec):focus-visible{outline:2px solid var(--t-accent-dark);outline-offset:3px}

.trydan-ins3__exp{margin-top:2.25rem;padding:1.1rem 1.15rem;border-radius:16px;background:#F7F5F2;max-width:30rem}
.trydan-lp .trydan-ins3__exp-t{margin:0;font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-tenue)}
.trydan-lp .trydan-ins3__lista{list-style:none;margin:.4rem 0 0;padding:0}
.trydan-lp .trydan-ins3__lista li{display:flex;align-items:center;gap:.875rem;margin:0;padding:.8rem 0;font-size:.9375rem;line-height:1.4;color:var(--t-ink);text-wrap:balance}
.trydan-lp .trydan-ins3__lista li+li{border-top:1px solid #ECE9E4}
.trydan-ins3__ic{flex:none;display:grid;place-items:center;width:2.125rem;height:2.125rem;border-radius:999px;background:#fff;color:var(--t-accent);box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.trydan-ins3__ic svg{width:1.125rem;height:1.125rem}

@media(min-width:48rem){
  .trydan-lp .trydan-ins3__cta{flex-direction:row;align-items:center}
  .trydan-lp a.trydan-ins3__sec{align-self:auto}
}
@media(min-width:56rem){
  .trydan-ins3{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);min-height:clamp(34rem,46vw,40rem)}
  .trydan-lp .trydan-ins3__foto{margin:12px 0 12px 12px;height:auto}
  .trydan-ins3__txt{padding:clamp(2.5rem,5vw,4.5rem)}
  .trydan-ins3__exp{padding:1.15rem 1.4rem}
}

/* IA: "V2C Assistant" no se parte en dos lineas en movil */
.trydan-ia3__quien b{white-space:nowrap}

/* movil estrecho: el titulo de la caja en una linea y algo mas de ancho para los puntos */
@media(max-width:47.999rem){
  .trydan-ins3__txt{padding:1.75rem 1.25rem 1.5rem}
  .trydan-ins3__exp{padding:1rem}
  .trydan-lp .trydan-ins3__exp-t{letter-spacing:.1em}
  .trydan-lp .trydan-ins3__lista li{gap:.75rem;font-size:.875rem}
}

/* el instalador va integrado bajo la comparativa: misma seccion blanca, mismo ancho,
   mismo gris y mismo radio que la caja de los cargadores, separado 2em */
.trydan-lp.trydan-vs2{padding-bottom:2em}
.trydan-lp.trydan-ins2{background:#fff;padding-top:0}
.trydan-ins3{max-width:none;background:var(--t-bg);box-shadow:none;border-radius:var(--t-r-media,24px)}
.trydan-ins3__exp{background:#fff}

/* lado derecho del instalador: una frase que dice que pasa al hacer clic, y los
   tres puntos de "Expertos" sueltos bajo una linea fina, sin caja ni circulos */
.trydan-lp .trydan-ins3__lead{margin:1.1rem 0 0;max-width:38ch;font-size:var(--t-fs-p);line-height:1.6;color:var(--t-body);text-wrap:pretty}
.trydan-lp .trydan-ins3__lead ~ .trydan-ins3__cta{margin-top:1.75rem}
.trydan-ins3__exp{background:none;border-radius:0;padding:1.5rem 0 0;margin-top:2.5rem;border-top:1px solid #E3E0DA}
.trydan-ins3__ic{background:none;box-shadow:none;width:auto;height:auto}
.trydan-lp .trydan-ins3__lista li+li{border-top:0}
.trydan-lp .trydan-ins3__lista li{padding:.45rem 0}
@media(max-width:47.999rem){.trydan-ins3__exp{padding:1.25rem 0 0;margin-top:2rem}}

/* ==== tour.css ==== */
/* ═══ APP · recorrido guiado (con el patron del simulador de Nexo) ═══════════════
   La pantalla de la app de frente y sin marco de movil: solo la pantalla con 20px de
   radio y una sombra. Cada paso enmarca en naranja el control que explica (se puede
   pulsar: pasa al siguiente) y al lado sale una burbuja blanca con pico, como la pista
   del Nexo. A la derecha, la lista de pasos: el activo en tarjeta blanca y los hechos
   con ✓. En movil la lista se queda en puntos y la burbuja va debajo de la pantalla.
   Las pantallas son las mismas .ap de la seccion de la app, sin la barra de la hora
   ni el boton del chat. */
.trydan-tour,.trydan-tour *{box-sizing:border-box}
.trydan-tour{display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:62rem;margin:0 auto}
.trydan-tour__escena{position:relative;width:min(19rem,78vw)}
.trydan-tour__pantalla{
  position:relative;aspect-ratio:9/18.6;container-type:size;overflow:hidden;
  border-radius:20px;background:#EEEEEE;-webkit-user-select:none;user-select:none;
  box-shadow:0 40px 80px -40px rgba(21,19,20,.4),0 12px 32px -18px rgba(21,19,20,.18),0 0 0 1px rgba(21,19,20,.06);
}

/* cada pantalla ocupa todo el hueco; entra y sale con un fundido */
.trydan-tour__vista{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--t-ease,ease),visibility 0s .45s}
.trydan-tour__vista.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--t-ease,ease),visibility 0s}
.trydan-tour .ap-st,.trydan-tour .ap-fab{display:none}
/* sin la barra de la hora la pantalla sube un poco; --desp hace el scroll de la app */
.trydan-tour .ap__mov{transform:translateY(calc(-1.25em - var(--desp,0) * 1em));transition:transform .7s var(--t-ease,ease)}
.trydan-tour__svg,.trydan-tour__svg svg{display:block;width:100%;height:100%}

/* el control del paso: marco naranja que late; es un boton, pasa al siguiente */
.trydan-tour__punto{
  position:absolute;z-index:8;font-size:calc(100cqw / 24.375);
  left:calc(var(--x,0) * 1em);top:calc((var(--y,0) - var(--desp,0) - var(--base,0)) * 1em);
  width:calc(var(--w,4) * 1em);height:calc(var(--h,2) * 1em);
  margin:0;padding:0;border:0;border-radius:.75em;background:transparent;cursor:pointer;
  box-shadow:0 0 0 .14em var(--t-accent,#EE7F1B),0 0 0 .55em rgba(238,127,27,.16);
  transition:left .6s var(--t-ease,ease),top .6s var(--t-ease,ease),width .6s var(--t-ease,ease),height .6s var(--t-ease,ease);
}
.trydan-tour__punto::after{content:"";position:absolute;inset:-.55em;border-radius:1.1em;border:.12em solid rgba(238,127,27,.5);animation:trydan-tour-late 1.8s ease-out infinite;pointer-events:none}
.trydan-tour__punto b{
  position:absolute;right:-.8em;top:-.8em;display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:999px;
  background:var(--t-accent,#EE7F1B);color:#fff;font:600 .8em/1 Montserrat,system-ui,sans-serif;box-shadow:0 6px 14px -6px rgba(0,0,0,.4);
}
.trydan-tour__punto:focus-visible{outline:2px solid var(--t-ink,#2E2E2A);outline-offset:.7em}
@keyframes trydan-tour-late{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}

/* controles que se pueden tocar en su paso: el marco deja pasar los toques */
.trydan-tour:not([data-toca=""]) .trydan-tour__punto{pointer-events:none}
.trydan-tour .ap :is(.ap-int,.ap-pct.es-2,.trydan-perf__tr,.trydan-perf__nom){pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.trydan-tour .ap .ap-int{touch-action:none;cursor:ew-resize}
.trydan-tour .ap.es-p4 .ap-int.is-tocado{animation:none}
.trydan-tour .ap.es-p4 .ap-int.is-tocado .ap-dedo{display:none!important}
.trydan-tour .ap .ap-pct.es-2.is-pulsado{animation:trydan-tour-pop .35s var(--t-ease,ease)}
@keyframes trydan-tour-pop{40%{transform:scale(1.06)}}
.trydan-perf__tr,.trydan-perf__barra i{transition:box-shadow .25s ease,background-color .25s ease,opacity .25s ease}
.trydan-perf__nom i,.trydan-perf__nom i::after{transition:background-color .25s ease,right .25s ease}
.trydan-perf.is-apagado .trydan-perf__nom i{background:#D9D9D9}
.trydan-perf.is-apagado .trydan-perf__nom i::after{right:1.25em}
.trydan-perf.is-apagado :is(.trydan-perf__dia,.trydan-perf__lista){opacity:.4}

/* la burbuja: blanca, con pico hacia el control y un punto que late (como la pista del Nexo) */
.trydan-tour__globo{
  position:relative;margin-top:1.25rem;padding:13px 16px;border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(21,19,20,.06),0 12px 32px rgba(21,19,20,.12);
  transition:opacity .25s var(--t-ease,ease);
}
.trydan-tour__globo::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;background:#fff;border-radius:2px;transform:rotate(45deg)}
.trydan-tour__globo.is-cambia{opacity:0}
.trydan-lp .trydan-tour__cab{margin:0 0 .4rem;font-size:var(--t-fs-rot,.75rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-accent-dark,#C25E00)}
.trydan-lp .trydan-tour__pista{position:relative;margin:0;padding-left:18px;font:500 14px/1.45 Montserrat,system-ui,sans-serif;color:var(--t-ink,#2E2E2A);text-wrap:pretty}
.trydan-tour__pista b{font-weight:700}
.trydan-tour__pista::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--t-accent,#EE7F1B);animation:trydan-tour-latido 1.6s ease-in-out infinite}
@keyframes trydan-tour-latido{50%{transform:scale(1.5);opacity:.5}}
.trydan-lp .trydan-tour__sigue{margin:.45rem 0 0;padding-left:18px;font:500 12px/1.4 Montserrat,system-ui,sans-serif;color:#8A877F}
.trydan-tour.is-tocado .trydan-tour__sigue{display:none}

/* la lista de pasos; en movil se queda en puntos (el activo se alarga y se llena hasta pasar) */
.trydan-tour__panel{display:flex;align-items:center;gap:1.1rem}
.trydan-lp .trydan-tour__pasos{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.5rem}
.trydan-tour__pasos li{margin:0;padding:0}
.trydan-lp button.trydan-tour__paso{
  position:relative;display:block;width:.5rem;height:.5rem;margin:0;padding:0;border:0;border-radius:999px;overflow:hidden;cursor:pointer;
  background:#D3D0C9;transition:width .35s var(--t-ease,ease);
}
.trydan-lp button.trydan-tour__paso.is-on{width:2.1rem}
.trydan-tour__paso :is(.trydan-tour__n,.trydan-tour__pt,.trydan-tour__pd){display:none}
.trydan-tour__paso i{position:absolute;inset:0;border-radius:inherit;background:var(--t-ink,#2E2E2A);transform-origin:left;transform:scaleX(0)}
.trydan-tour__paso.is-on i{transform:scaleX(var(--av,1))}
.trydan-tour:not(.is-auto) .trydan-tour__paso.is-on i{transform:scaleX(1)}
@media(max-width:59.99rem){.trydan-tour:not(.is-auto) .trydan-tour__paso.is-on i{opacity:.35}}
.trydan-lp button.trydan-tour__fl{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:0;padding:0;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid rgba(46,46,42,.2);color:var(--t-ink,#2E2E2A);transition:border-color .25s var(--t-ease,ease);
}
.trydan-lp button.trydan-tour__fl:hover{border-color:var(--t-ink,#2E2E2A);background:transparent}
.trydan-tour__fl svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trydan-tour__nav{display:contents}
.trydan-tour__nav .trydan-tour__fl:first-child{order:-1}
.trydan-lp :is(button.trydan-tour__paso,button.trydan-tour__fl):focus-visible{outline:2px solid var(--t-accent-dark,#C25E00);outline-offset:3px}

/* escritorio: pantalla + burbuja a la izquierda, a la altura del control; lista de pasos a la derecha */
@media(min-width:60rem){
  .trydan-tour{display:grid;grid-template-columns:20rem 15rem minmax(0,1fr);align-items:center;gap:0 1.5rem}
  .trydan-tour__escena{grid-column:1 / span 2;width:20rem}
  .trydan-tour__globo{
    position:absolute;left:calc(100% + 1.25rem);top:var(--gy,50%);width:14.5rem;margin:0;transform:translateY(-50%);
    transition:opacity .25s var(--t-ease,ease),top .6s var(--t-ease,ease);
  }
  .trydan-tour__globo::before{left:-6px;top:50%;margin:-6px 0 0}
  .trydan-tour__globo .trydan-tour__pista{animation:trydan-tour-mece 1.6s cubic-bezier(.37,0,.63,1) infinite}
  .trydan-tour.is-tocado .trydan-tour__globo .trydan-tour__pista{animation:none}
  .trydan-tour .trydan-tour__cab{display:none}
  .trydan-tour__panel{grid-column:3;display:block}
  .trydan-lp .trydan-tour__pasos{flex-direction:column;align-items:stretch;gap:4px;counter-reset:none}
  .trydan-lp button.trydan-tour__paso,.trydan-lp button.trydan-tour__paso.is-on{
    width:100%;height:auto;padding:11px 16px 11px 58px;border-radius:16px;background:transparent;text-align:left;opacity:.6;
    font-family:Montserrat,system-ui,sans-serif;color:var(--t-ink,#2E2E2A);transition:background-color .25s ease,opacity .25s ease,box-shadow .25s ease;
  }
  .trydan-lp button.trydan-tour__paso:hover{opacity:1;background:transparent}
  .trydan-lp button.trydan-tour__paso.is-on{opacity:1;background:#fff;box-shadow:0 8px 26px rgba(0,0,0,.05)}
  .trydan-tour__paso .trydan-tour__n{
    display:grid;place-items:center;position:absolute;left:16px;top:9px;width:28px;height:28px;border-radius:50%;
    font-size:11px;font-weight:700;color:#737373;box-shadow:inset 0 0 0 1.5px #D4D4D4;transition:background-color .25s ease,color .25s ease;
  }
  .trydan-tour__paso.is-on .trydan-tour__n{background:var(--t-accent,#EE7F1B);color:#fff;box-shadow:none}
  .trydan-tour__paso.is-hecho .trydan-tour__n{font-size:0;background:#FDEBDA;color:var(--t-accent-dark,#C25E00);box-shadow:none}
  .trydan-tour__paso.is-hecho .trydan-tour__n::before{content:"✓";font-size:13px}
  .trydan-tour__paso.is-hecho{opacity:.85}
  .trydan-tour__paso .trydan-tour__pt{display:block;font-size:16px;font-weight:600;line-height:1.35;padding-top:3px}
  /* la descripcion solo en el paso activo */
  .trydan-tour__paso .trydan-tour__pd{display:block;max-height:0;overflow:hidden;font-size:14px;line-height:1.5;color:var(--t-body,#5F5D57);transition:max-height .4s var(--t-ease,ease),margin .4s var(--t-ease,ease)}
  .trydan-tour__paso.is-on .trydan-tour__pd{max-height:6em;margin-top:4px}
  /* el progreso del paso automatico: una linea fina abajo de la tarjeta */
  .trydan-tour__paso i{inset:auto 16px 0 58px;height:2px;border-radius:2px;background:var(--t-accent,#EE7F1B);opacity:0}
  .trydan-tour.is-auto .trydan-tour__paso.is-on i{opacity:1}
  .trydan-tour__nav{display:none}
}
@keyframes trydan-tour-mece{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}

@media(prefers-reduced-motion:reduce){
  .trydan-tour *,.trydan-tour *::before,.trydan-tour *::after{animation:none!important;transition:none!important}
}

/* solo en la pagina de prueba */
.trydan-tour-sec{padding:clamp(3rem,7vw,7rem) var(--t-gutter-sec,1.5rem);background:var(--t-bg,#F5F4F2)}
.trydan-tour-sec__cab{max-width:46rem;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}

/* perfiles de carga: pantalla dibujada con el estilo de la app (gris #EEE, tarjetas blancas) */
.ap.trydan-perf{background:#EEEEEE}
.trydan-perf .ap__mov{height:53em}
.trydan-perf__cab{position:absolute;left:0;top:0;width:24.375em;height:5.25em;background:#fff;border-radius:0 0 .9375em .9375em}
.trydan-perf__cab .ap-i{position:absolute;left:1.25em;top:2.6em;width:.875em;height:1.375em;color:#111;stroke-width:2.2}
.trydan-perf__cab b{position:absolute;left:3em;top:2.55em;font-size:1.05em;font-weight:600;color:#111}
.trydan-lp .trydan-perf__sub{position:absolute;left:1.667em;top:9.333em;margin:0;font-size:.75em;font-weight:500;color:#767575}
.trydan-lp .trydan-perf__nom{position:absolute;left:1em;top:8.6em;width:22.375em;height:3.25em;margin:0;padding:0 1em;display:flex;align-items:center;justify-content:space-between;
  border-radius:.625em;background:#fff;font-size:1em;font-weight:500;color:#111}
.trydan-perf__nom i{width:2.4em;height:1.3em;border-radius:999px;background:#111;position:relative}
.trydan-perf__nom i::after{content:"";position:absolute;right:.15em;top:.15em;width:1em;height:1em;border-radius:999px;background:#fff}
.trydan-perf__dia{position:absolute;left:1em;top:13.6em;width:22.375em;padding:1em;border-radius:.625em;background:#fff}
.trydan-perf__barra{display:flex;gap:.2em;height:.9em}
.trydan-perf__barra i{border-radius:.25em;background:#D9D9D9}
.trydan-perf__barra i.es-on{background:#39AC55}
.trydan-perf__h{display:flex;justify-content:space-between;margin-top:.5em;font-size:.625em;color:#8A8A8A}
.trydan-perf__lista{position:absolute;left:1em;top:18.9em;width:22.375em;display:flex;flex-direction:column;gap:.6em}
.trydan-perf__tr{position:relative;height:3.3em;border-radius:.625em;background:#fff}
.trydan-perf__tr.es-on{box-shadow:inset 0 0 0 1px #39AC55}
.trydan-perf__tr b{position:absolute;left:1em;top:.75em;font-size:.875em;font-weight:600;color:#111}
.trydan-perf__tr span{position:absolute;left:1.333em;top:2.5em;font-size:.75em;color:#767575}
.trydan-perf__tr strong{position:absolute;right:1em;top:1.05em;font-size:1em;font-weight:500;color:#111}
.trydan-lp .trydan-perf__btn{position:absolute;left:1.143em;top:35.9em;width:25.571em;height:3.143em;margin:0;display:grid;place-items:center;border-radius:999px;background:#111;color:#fff;font-size:.875em;font-weight:600}

/* ==== appsim.css ==== */
/* ═══ APP · simulador de la app V2C (diseño nuevo) dentro del recorrido ═══════════
   Va sobre el maquetado de tour.css (pantalla, burbuja, lista de pasos). La app se
   dibuja en un lienzo de 393 x 812 pt (iPhone sin la barra de la hora) y appsim.js
   lo escala con --k al ancho de la pantalla. Todo en px del lienzo y con el prefijo
   .as para ganar a los estilos de parrafo del tema. */
.trydan-as .trydan-tour__pantalla{aspect-ratio:393/812;background:#EDEDED}
.as{position:absolute;left:0;top:0;width:393px;height:812px;overflow:hidden;transform:scale(var(--k,1));transform-origin:0 0;
  font-family:Montserrat,system-ui,sans-serif;color:#111;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.as *{box-sizing:border-box}
.as :is(p,h4,ul,li){margin:0;padding:0;list-style:none}
.as .as-i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.as [data-as]{cursor:pointer}

/* pantallas: la portada al fondo, las de detalle entran desde la derecha */
.as .as-p{position:absolute;inset:0;background:#EDEDED;overflow:hidden}
.as .as-sub{transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:3}
.as .as-sub.is-on{transform:none}
.as .as-mov{position:relative;transform:translateY(calc(var(--desp,0) * -1px));transition:transform .6s cubic-bezier(.22,1,.36,1)}

/* portada */
.as .as-foto{position:absolute;left:0;top:70px;width:393px;height:223px;object-fit:cover;border-radius:0 0 22px 22px}
.as .as-cab{position:absolute;left:0;top:0;width:393px;height:90px;background:#fff;border-radius:0 0 22px 22px;z-index:2}
.as .as-cab__atras .as-i{position:absolute;left:16px;top:36px;width:24px;height:24px}
.as .as-cab > b{position:absolute;left:58px;top:38px;font-size:16px;font-weight:600}
.as .as-bloq{position:absolute;right:26px;top:33px;width:52px;height:30px;border-radius:15px;background:#E2E2E2}
.as .as-bloq i{position:absolute;left:2px;top:2px;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center}
.as .as-bloq .as-i{width:15px;height:15px;color:#555}
.as .as-lista{position:absolute;left:15px;top:308px;width:363px;display:flex;flex-direction:column;gap:14px;padding-bottom:120px}

.as .as-veh{height:40px;border-radius:8px;background:#000;color:#fff;display:flex;align-items:center;gap:12px;padding:0 18px;font-size:15px;font-weight:500}
.as .as-veh .as-i{width:23px;height:23px}

.as .as-cd{position:relative;height:64px;border:1.5px solid #00B100;border-radius:10px}
.as .as-cb{position:absolute;left:16px;top:22px;width:17px;height:17px;border-radius:3px;background:#111;display:grid;place-items:center}
.as .as-cb .as-i{width:13px;height:13px;color:#fff;stroke-width:2.6}
.as .as-cd > b{position:absolute;left:44px;top:22px;font-size:14px;font-weight:500}
.as .as-cd__v{position:absolute;right:46px;top:21px;font-size:14.5px;font-weight:500}
.as .as-cd__lapiz{position:absolute;right:8px;top:12px;width:36px;height:38px;display:grid;place-items:center}

.as .as-int{position:relative;height:116px;border:2px solid #fff;border-radius:12px}
.as .as-int > b{position:absolute;left:20px;top:22px;font-size:15px;font-weight:500}
.as .as-int__v{position:absolute;right:54px;top:22px;font-size:14.5px;font-weight:500}
.as .as-int__cand{position:absolute;right:12px;top:15px;width:32px;height:34px;display:grid;place-items:center;color:#A5A5A5}
.as .as-int__cand .as-i{grid-area:1/1}
.as .as-int .es-abierto,.as .as-int.is-libre .es-cerrado{display:none}
.as .as-int.is-libre .es-abierto{display:block}
.as .as-int.is-libre .as-int__cand{color:#111}
.as .as-riel{position:absolute;left:22px;right:20px;top:72px;height:4px;border-radius:4px;background:#A5A5A5;touch-action:none}
.as .as-riel::before{content:"";position:absolute;left:-12px;right:-12px;top:-18px;bottom:-18px}
.as .as-riel i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f,1) * 100%);border-radius:inherit;background:#A5A5A5}
.as .as-riel s{position:absolute;top:50%;left:calc(var(--f,1) * 100%);width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;background:#A5A5A5}
.as .as-int.is-libre .as-riel{background:#D6D6D6}
.as .as-int.is-libre .as-riel :is(i,s){background:#111}
.as .as-int__min,.as .as-int__max,.as .as-int__pista{position:absolute;top:86px;font-size:12.5px;color:#8A8A8A}
.as .as-int__min{left:22px}
.as .as-int__max{right:20px}
.as .as-int__pista{left:0;right:0;text-align:center;font-style:italic;font-size:11px;color:#A5A5A5;transition:opacity .3s}
.as .as-int.is-libre .as-int__pista{opacity:0}
.as .as-int.is-libre :is(.as-int__min,.as-int__max){color:#444}

.as .as-prog{height:43px;border:1.5px solid #3B956F;border-radius:10px;display:flex;align-items:center;gap:12px;padding:0 14px;color:#3B956F;font-size:15px}
.as .as-prog b{font-weight:500}
.as .as-prog .as-i{width:26px;height:26px}
.as .as-prog .as-i:last-child,.as .as-eco > .as-i:last-child,.as .as-perf > .as-i:last-child{margin-left:auto;width:22px;height:22px}
.as .as-prox,.as .as-eco{display:none}
.as.is-prog .as-prog{display:none}
.as.is-prog .as-prox,.as.is-prog .as-eco{display:flex}
.as .as-prox{flex-direction:column;gap:12px;padding:14px 14px 16px;border:2px solid #fff;border-radius:12px}
.as .as-prox__t{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}
.as .as-prox__t .as-i{width:28px;height:28px;color:#666}
.as .as-prox__h{position:relative;height:56px;border-radius:10px;background:#E2E2E2;padding:9px 14px;display:flex;flex-direction:column;font-size:14px}
.as .as-prox__h b{font-weight:500}
.as .as-prox__h .as-i{position:absolute;right:14px;top:17px;color:#888}
.as .as-boton{height:38px;border-radius:9px;background:#000;color:#fff;display:grid;place-items:center;font-size:14.5px;font-weight:500}
.as .as-eco{position:relative;height:66px;border:1.5px solid #3B7F9C;border-radius:10px;align-items:center;gap:12px;padding:0 14px}
.as .as-eco .as-i:first-child{width:26px;height:26px;color:#3B956F}
.as .as-eco b{position:absolute;left:52px;top:13px;font-size:15px;font-weight:500;color:#3B956F}
.as .as-eco span{position:absolute;left:52px;top:35px;font-size:14px;color:#333}
.as .as-eco > .as-i:last-child{color:#3B7F9C}

.as .as-cdp{position:relative;height:153px;border:2px solid #fff;border-radius:12px}
.as .as-cdp > b{position:absolute;left:20px;top:16px;font-size:15px;font-weight:500}
.as .as-cdp > span{position:absolute;left:20px;top:37px;font-size:14px;color:#555}
.as .as-cdp__amp{position:absolute;right:20px;top:16px;width:26px!important;height:26px!important;color:#333}
.as .as-cdp ul{position:absolute;left:16px;right:16px;top:64px;display:flex;gap:5px}
.as .as-cdp li{position:relative;flex:1;height:72px;border:2px solid #fff;border-radius:8px}
.as .as-cdp li b{position:absolute;left:10px;top:14px;font-size:14.5px;font-weight:500}
.as .as-cdp li b small{font-size:12px}
.as .as-cdp li:nth-child(2) b{top:24px;color:#8A8A8A;font-weight:400}
.as .as-cdp li span{position:absolute;left:10px;top:36px;font-size:14px;color:#8A8A8A}
.as .as-cdp li .as-i{position:absolute;right:6px;top:24px;color:#9A9A9A}
.as .as-perf{position:relative;height:58px;border-radius:12px;background:#E2E2E2;display:flex;align-items:center;gap:12px;padding:0 14px}
.as .as-perf .as-i:first-child{width:30px;height:30px;color:#444}
.as .as-perf b{position:absolute;left:58px;top:11px;font-size:13.5px;font-weight:500}
.as .as-perf b span{position:static;font-size:inherit;color:inherit}
.as .as-perf span{position:absolute;left:58px;top:30px;font-size:14px;color:#444}
.as .as-perf > .as-i:last-child{color:#999}

/* barra de navegacion */
.as .as-nav{position:absolute;left:12px;bottom:21px;width:369px;height:61px;border-radius:12px;background:#000;z-index:5;display:flex;justify-content:space-around;align-items:center}
.as .as-nav span{display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;color:#fff}
.as .as-nav .as-i{width:24px;height:24px}
.as .as-nav b{font-size:9.5px;font-weight:500;white-space:nowrap}
.as .as-nav .es-on{color:#E3141B}

/* pantallas de detalle */
.as .as-sub__cab{position:relative;height:84px;display:flex;align-items:center;justify-content:center;padding-top:10px;font-size:17px;font-weight:500}
.as .as-sub__atras{position:absolute;left:8px;top:26px;width:40px;height:44px;display:grid;place-items:center}
.as .as-sub__atras .as-i{width:26px;height:26px}
.as .as-sub__txt{padding:0 18px 16px;font-size:14px;line-height:1.4;color:#222}
.as .as-tem{position:relative;height:183px;margin:0 15px 14px;border-radius:12px;background:#fff}
.as .as-tem__t{position:absolute;left:22px;top:26px;font-size:16px;font-weight:500}
.as .as-tem__borrar{position:absolute;right:76px;top:22px;width:26px!important;height:26px!important;color:#333}
.as .as-sw{position:absolute;right:20px;top:22px;width:46px;height:27px;border-radius:14px;background:#D6D6D6;transition:background-color .25s}
.as .as-sw::after{content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:left .25s}
.as .as-sw.es-on{background:#111}
.as .as-sw.es-on::after{left:22px}
.as .as-dias{position:absolute;left:20px;right:20px;top:64px;display:flex;justify-content:space-between}
.as .as-dia{width:31px;height:31px;border-radius:50%;background:#F1F1F1;color:#8A8A8A;display:grid;place-items:center;font-size:13px;font-weight:500;transition:background-color .2s,color .2s}
.as .as-dia.es-on{background:#111;color:#fff}
.as .as-horas{position:absolute;left:22px;right:22px;top:108px;display:flex;gap:16px}
.as .as-horas p{flex:1;font-size:14px;color:#444}
.as .as-horas b{display:block;margin-top:8px;height:40px;border-radius:10px;background:#F5F5F5;text-align:center;line-height:40px;font-size:16px;font-weight:400;color:#111}
.as .as-info{position:relative;margin:0 15px;padding:11px 14px 11px 44px;border:1px solid #C4C4C4;border-radius:10px;background:#D7D7D7;font-size:12px;line-height:1.4;color:#222}
.as .as-info i{position:absolute;left:16px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:#111;color:#fff;font:700 10px/15px Montserrat,sans-serif;text-align:center}

.as .as-eco2{padding:0 22px}
.as .as-eco2 h4{margin:2px 0 10px;font-size:14px;font-weight:600}
.as .as-eco2 p{margin-bottom:10px;font-size:13px;line-height:1.45;color:#222}
.as .as-eco2__ver{display:table;margin:0 0 14px auto;padding:8px 12px;border-radius:7px;background:#000;color:#fff;font-size:13.5px;font-weight:500}
.as .as-seg{display:flex;margin:4px -4px 14px;padding:3px;border-radius:8px;background:#fff}
.as .as-seg span{flex:1;height:30px;border-radius:6px;display:grid;place-items:center;font-size:12.5px;transition:background-color .25s,color .25s}
.as .as-seg .es-on{background:#000;color:#fff}
.as .as-op{position:relative;margin:0 13px 12px;padding:22px 22px 18px;border-radius:14px;background:#fff}
.as .as-radio{position:absolute;left:24px;top:22px;width:19px;height:19px;border:2px solid #111;border-radius:50%}
.as .as-op.es-on .as-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#111}
.as .as-op > b{display:block;padding-left:30px;font-size:14px;font-weight:500}
.as .as-op > p{margin-top:14px;font-size:12px;line-height:1.45;color:#C9C9C9;transition:color .3s}
.as .as-op > strong{display:block;margin-top:12px;text-align:center;font-size:17px;font-weight:400;color:#D9D9D9;transition:color .3s}
.as .as-op.es-on > p{color:#666}
.as .as-op.es-on > strong{color:#111}

/* ventanas */
.as .as-velo{position:absolute;inset:0;z-index:6;background:rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.as.is-modal .as-velo{opacity:1;visibility:visible;transition:opacity .3s}
.as .as-modal{position:absolute;z-index:7;left:21px;width:351px;border-radius:22px;background:#fff;opacity:0;visibility:hidden;transform:translateY(24px);
  transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s .4s}
.as .as-modal.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.as .as-modal__x{position:absolute;right:18px;top:18px;width:28px;height:28px;display:grid;place-items:center}
.as .as-m-kwh{top:168px;padding:24px 22px 22px}
.as .as-m-kwh .as-modal__x{top:20px;right:16px;border-radius:50%;background:#F2F2F2}
.as .as-m-kwh .as-modal__x .as-i{width:18px;height:18px;stroke-width:2}
.as .as-m__tit{padding-right:44px;font-size:18px;font-weight:600;line-height:1.35;color:#111;text-wrap:balance}
.as .as-m__txt{margin-top:10px!important;font-size:13px;line-height:1.5;color:#6B6B6B}
.as .as-kwh{position:relative;height:138px;margin:20px 0 22px;border-radius:14px;background:#F4F4F4}
.as .as-kwh b{position:absolute;left:20px;top:16px;font-size:26px;font-weight:600;letter-spacing:-.01em}
.as .as-kwh__t{position:absolute;left:20px;top:52px;font-size:12.5px;color:#555}
.as .as-kwh .as-riel{left:22px;right:22px;top:96px;height:5px;background:#DCDCDC}
.as .as-kwh .as-riel :is(i,s){background:#111}
.as .as-kwh .as-riel s{width:22px;height:22px;margin:-11px 0 0 -11px;box-shadow:0 0 0 4px #fff}
.as .as-kwh span{position:absolute;top:114px;left:22px;font-size:12px;color:#888}
.as .as-m-kwh .as-boton{height:48px;border-radius:12px;background:#111;color:#fff;font-size:15px;font-weight:600}
.as .as-kwh span:last-child{left:auto;right:22px}
.as .as-m-tipo{left:25px;width:343px;top:40px;height:510px;padding:84px 24px}
.as .as-m-tipo .as-modal__x .as-i{stroke-width:2.4}
.as .as-m-tipo h4{text-align:center;font-size:18px;font-weight:500}
.as .as-m-tipo > p{margin:16px 0 28px;text-align:center;font-size:14px;line-height:1.45;color:#222}
.as .as-opc{height:56px;margin-bottom:22px;border:2px solid #C8C8C8;border-radius:22px;display:grid;place-items:center;font-size:15px}

/* lo que hay que tocar: recuadro naranja que late; y el dedo cuando la app toca sola */
.as .as-aro{position:absolute;z-index:9;left:0;top:0;width:0;height:0;border-radius:12px;pointer-events:none;opacity:0;
  box-shadow:0 0 0 2.5px #EE7F1B,0 0 0 8px rgba(238,127,27,.16);
  transition:left .5s cubic-bezier(.22,1,.36,1),top .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),opacity .3s}
.as .as-aro.is-on{opacity:1}
.as .as-aro::after{content:"";position:absolute;inset:-8px;border-radius:18px;border:2px solid rgba(238,127,27,.5);animation:trydan-tour-late 1.8s ease-out infinite}
.as .as-mano{position:absolute;z-index:10;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;opacity:0;
  background:rgba(110,110,110,.35);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),0 4px 12px rgba(0,0,0,.15)}
.as .as-mano.is-toca{animation:as-toca .7s cubic-bezier(.22,1,.36,1)}
@keyframes as-toca{0%{opacity:0;transform:scale(1.4)}30%{opacity:1;transform:scale(1)}55%{transform:scale(.82)}100%{opacity:0;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.as *,.as *::after{animation:none!important;transition:none!important}}

/* ---- paso 4: perfiles de carga y programacion de 24 h ---- */
.as .as-cdp__amp{position:absolute;right:10px;top:6px;width:44px;height:44px;display:grid;place-items:center;color:#333}
.as .as-cdp__amp .as-i{width:26px;height:26px}
.as .as-perfs{display:flex;flex-direction:column;gap:12px;margin:6px 15px 22px}
.as .as-pf{position:relative;height:50px;border-radius:10px;background:#F5F5F5;box-shadow:inset 0 0 0 1.5px #E2E2E2;transition:box-shadow .25s}
.as .as-pf.es-on{box-shadow:inset 0 0 0 2px #111}
.as .as-pf__cb{position:absolute;left:28px;top:16px;width:18px;height:18px;border:1.5px solid #333;border-radius:3px}
.as .as-pf__cb .as-i{display:none;width:26px;height:26px;margin:-6px 0 0 -6px;stroke-width:2.6}
.as .as-pf.es-on .as-pf__cb{border:0}
.as .as-pf.es-on .as-pf__cb .as-i{display:block}
.as .as-pf > b{position:absolute;left:62px;top:16px;font-size:14.5px;font-weight:400}
.as .as-pf__ed{position:absolute;right:46px;top:5px;width:40px;height:40px;display:grid;place-items:center}
.as .as-pf__x{position:absolute;right:20px;top:14px;color:#E0201B;stroke-width:1.8}
.as .as-pf__mas{position:relative;height:50px;border:1.5px dashed #BDBDBD;border-radius:10px;display:flex;align-items:center;gap:20px;padding-left:20px;font-size:15px;color:#333}
.as .as-pf__mas i{width:25px;height:25px;border:1.5px solid #AAA;border-radius:50%;display:grid;place-items:center;font:300 20px/1 Montserrat,sans-serif;color:#999;font-style:normal}
.as .as-pf__guardar{width:160px;margin:0 auto 16px}
.as .as-pf__nota{padding:0 15px;font-size:11.5px;line-height:2;color:#555}

.as .as-centro{text-align:center}
.as .as-seg2{display:flex;margin:0 10px 22px;padding:3px;border-radius:10px;background:#F7F7F7}
.as .as-seg2 span{flex:1;height:34px;border-radius:8px;display:grid;place-items:center;font-size:12.5px;letter-spacing:.06em;color:#888}
.as .as-seg2 .es-on{background:#111;color:#fff}
.as .as-prg{position:relative;margin:0 10px 28px;padding:26px 22px 26px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #E3E3E3}
.as .as-prg__t{font-size:17px;font-weight:400}
.as .as-prg__s{margin-top:3px!important;font-size:12.5px;color:#888}
.as .as-barra{display:flex;height:64px;margin-top:22px;border-radius:13px;overflow:hidden}
.as .as-tr{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;transition:background-color .3s}
.as .as-tr .as-i{width:15px;height:15px;stroke-width:2}
.as .as-tr b{font-size:11.5px;font-weight:400;white-space:nowrap}
.as .as-tr + .as-tr::before{content:"";position:absolute;left:-6px;top:15px;width:11px;height:34px;border-radius:6px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);z-index:1}
.as .as-tr.es-sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #111}
.as .as-tr.es-minima,.as .as-chip.es-minima i,.as .as-ed__ico.es-minima{background:#35A853}
.as .as-tr.es-exclusivo,.as .as-chip.es-exclusivo i,.as .as-ed__ico.es-exclusivo{background:#F5B70A}
.as .as-tr.es-redfv,.as .as-chip.es-redfv i,.as .as-ed__ico.es-redfv{background:#2F80E8}
.as .as-tr.es-aislada,.as .as-chip.es-aislada i,.as .as-ed__ico.es-aislada{background:#7B5CF0}
.as .as-tr.es-sincarga,.as .as-chip.es-sincarga i,.as .as-ed__ico.es-sincarga{background:#9AA0A8}
.as .as-prg__h{display:flex;justify-content:space-between;margin-top:12px!important;font-size:12px;color:#777}
.as .as-prg__n{margin-top:10px!important;text-align:center;font-size:12.5px;color:#888}
.as .as-ed{display:none;position:relative;margin:24px 0 4px;padding:18px 18px 16px;border:2.5px solid #111;border-radius:22px}
.as .is-editar .as-ed{display:block}
.as .as-ed__ico{position:absolute;left:18px;top:18px;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#fff;transition:background-color .3s}
.as .as-ed__ico .as-i{width:20px;height:20px;stroke-width:2}
.as .as-ed__h{position:absolute;left:66px;top:18px;font-size:16px;font-weight:600;color:#1E88E5}
.as .as-ed__lap{position:absolute;left:184px;top:15px;width:18px!important;height:18px!important;color:#999}
.as .as-ed__m{position:absolute;left:66px;top:39px;font-size:12.5px;font-weight:600;color:#888}
.as .as-ed__x{position:absolute;right:16px;top:20px;width:30px;height:30px;border-radius:50%;background:#F0F0F0;display:grid;place-items:center;color:#777}
.as .as-ed__x .as-i{width:16px;height:16px}
.as .as-ed__modo{margin-top:60px!important;font-size:11px;font-weight:600;letter-spacing:.04em;color:#888}
.as .as-ed__modo i{display:inline-grid;place-items:center;width:13px;height:13px;margin-left:4px;border-radius:50%;background:#999;color:#fff;font:700 8.5px/1 Montserrat,sans-serif;font-style:normal}
.as .as-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;width:200px}
.as .as-chip{display:inline-flex;align-items:center;gap:7px;height:31px;padding:0 11px;border-radius:9px;background:#F7F7F7;box-shadow:inset 0 0 0 1.5px #E3E3E3;font-size:12px;font-weight:600;white-space:nowrap;transition:box-shadow .2s,background-color .2s}
.as .as-chip i{width:10px;height:10px;border-radius:2.5px}
.as .as-chip.es-on{background:#fff}
.as .as-chip.es-on.es-minima{box-shadow:inset 0 0 0 2px #35A853}
.as .as-chip.es-on.es-exclusivo{box-shadow:inset 0 0 0 2px #F5B70A}
.as .as-chip.es-on.es-redfv{box-shadow:inset 0 0 0 2px #2F80E8}
.as .as-chip.es-on.es-aislada{box-shadow:inset 0 0 0 2px #7B5CF0}
.as .as-chip.es-on.es-sincarga{box-shadow:inset 0 0 0 2px #8A9098}
.as .as-ed__val{position:relative;height:84px;margin-top:16px}
.as .as-ed.es-sin .as-ed__val{display:none}
.as .as-ed.es-sin .as-ed__bots{margin-top:16px}
.as .as-ed__lab{position:absolute;left:0;top:14px;font-size:12px;font-weight:600;color:#888}
.as .as-ed__v{position:absolute;right:28px;top:0;width:72px;height:40px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #EDEDED,0 2px 6px rgba(0,0,0,.05);text-align:right;padding-right:10px;line-height:40px;font-size:18px;font-weight:600}
.as .as-ed__u{position:absolute;right:0;top:11px;font-size:13px;font-weight:600;color:#AAA}
.as .as-ed__riel{position:absolute;left:0;right:0;top:62px;height:3px;border-radius:3px;background:#E8E8E8}
.as .as-ed__riel i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f,0) * 100%);border-radius:3px;background:#111;transition:width .35s}
.as .as-ed__riel s{position:absolute;top:50%;left:calc(var(--f,0) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#111;transition:left .35s}
.as .as-ed__bots{display:flex;gap:10px;margin-top:4px}
.as .as-ed__bots span{flex:1;height:50px;border-radius:12px;background:#F4F4F4;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:600;line-height:1.05;text-align:center}
.as .as-ed__bots .es-rojo{color:#E0201B}
.as .as-ed__bots .as-i{width:18px;height:18px}
.as .as-ley{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:22px!important}
.as .as-ley li{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#444}
.as .as-ley .as-i{width:14px;height:14px;stroke-width:2}
.as .as-ley .es-minima .as-i{color:#35A853}
.as .as-ley .es-exclusivo .as-i{color:#F5B70A}
.as .as-ley .es-redfv .as-i{color:#2F80E8}
.as .as-ley .es-aislada .as-i{color:#7B5CF0}
.as .as-ley .es-sincarga .as-i{color:#9AA0A8}
.as .as-cfg__guardar{margin:0 10px 14px;height:36px}
.as .as-ayuda{text-align:center;font-size:13px;color:#777;text-decoration:underline;padding-bottom:110px}

/* ---- paso 5: flujo de energia ---- */
.as .as-m-flujo{left:31px;width:331px;top:35px;height:682px;border-radius:4px;background:#000;color:#fff;padding:0}
.as .as-m-flujo .as-modal__x{right:14px;top:16px;color:#fff;z-index:1}
.as .as-m-flujo .as-modal__x .as-i{stroke-width:2.6}
.as .as-fl__svg{position:absolute;inset:0;width:100%;height:100%;font-family:Montserrat,sans-serif}
/* igual que flujo.css de la pagina: puntos que corren por las lineas, halos que laten y la caja que respira */
.as .as-fl__linea{fill:none;stroke-width:1.6}
.as .as-fl__corre{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:0 12.5;animation:as-fl-corre 2.4s linear infinite}
.as .as-fl__corre.es-sol{stroke-dasharray:0 25;animation-duration:5.5s}
.as .as-fl__corre.es-red{animation-duration:1.6s}
.as .as-fl__quieto{display:none}
.as .as-fl__halo{transform-box:fill-box;transform-origin:center;animation:as-fl-halo 3s ease-in-out infinite}
.as .as-fl__halo.es-red{animation-delay:-1.5s}
.as .as-fl__caja{animation:as-fl-caja 3s ease-in-out infinite}
.as .as-fl__ic{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.as .as-fl__ic.es-apagado{stroke:#3a3a3a}
.as .as-fl__kw{fill:#fff;font-size:9px;font-weight:500;text-anchor:middle}
@keyframes as-fl-corre{to{stroke-dashoffset:-100}}
@keyframes as-fl-halo{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes as-fl-caja{0%,100%{stroke-opacity:.7}50%{stroke-opacity:1}}
@media (prefers-reduced-motion:reduce){.as .as-fl__corre{display:none}.as .as-fl__quieto{display:inline}.as .as-fl__halo,.as .as-fl__caja{animation:none}}

/* ---- paso 6: control de potencia ---- */
.as .as-cp__f{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;margin:0 15px 12px;padding:14px 18px 14px 22px;border-radius:12px;background:#fff}
.as .as-cp__f > p{flex:1;font-size:14px;line-height:1.5;color:#222}
.as .as-cp__f > p i{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#111;color:#fff;font:700 10px/1 Montserrat,sans-serif;font-style:normal}
.as .as-cp__f.es-col{flex-direction:column;align-items:stretch}
.as .as-sw--g{position:relative;right:auto;top:auto;width:52px;height:31px;border-radius:16px;flex:none}
.as .as-sw--g::after{width:25px;height:25px}
.as .as-sw--g.es-on::after{left:24px}
.as .as-sel{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:122px;height:38px;padding:0 12px;border-radius:9px;background:#EFEFEF;font-size:14px;color:#555}
.as .as-sel b{font-weight:400}
.as .as-sel .as-i{width:18px;height:18px;color:#333}
.as .as-sel.es-gris{background:#F7F7F7;color:#C5C5C5}
.as .as-sel.es-ancho{width:100%}
.as .as-sel.es-borde{width:100%;height:46px;background:#fff;box-shadow:inset 0 0 0 1.5px #CFCFCF;color:#666}
.as .as-cp__resto{transition:opacity .3s}
.as [data-pant="control"]:not(.is-cp) .as-cp__resto{opacity:.4;pointer-events:none}
.as .as-menu{position:absolute;right:18px;top:58px;z-index:2;width:122px;padding:4px;border-radius:10px;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 0 1px #EDEDED;display:none}
.as .is-menu .as-menu{display:block}
.as .as-menu span{display:block;padding:9px 10px;border-radius:7px;font-size:14px}
.as .as-menu span.es-on{background:#F0F0F0;font-weight:500}

/* ---- paso 7: tarifa ---- */
.as .as-tf__c{margin:0 15px 14px;padding:16px 18px;border-radius:12px;background:#fff}
.as .as-tf__c > p{margin-bottom:12px!important;font-size:13.5px;line-height:1.4;color:#222}
.as .as-tf__per h4{margin-bottom:10px;font-size:14px;font-weight:500}
.as .as-tf__est{display:flex;gap:9px;margin-bottom:12px}
.as .as-tf__est p{flex:1;height:48px;padding:6px 10px;border-radius:9px;background:#F3F3F3}
.as .as-tf__est span{display:block;font-size:9.5px;letter-spacing:.06em;color:#999}
.as .as-tf__est b{font-size:15px;font-weight:400}
.as .as-horas24{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.as .as-h{height:46px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:var(--hb,#F4F8E1);box-shadow:inset 0 0 0 1px var(--hl,#E3EBC4);transition:background-color .3s,box-shadow .2s}
.as .as-h b{font-size:13px;font-weight:400}
.as .as-h i{font-style:normal;font-size:12px;color:var(--hc,#6E8A23)}
.as .as-h.es-sel{box-shadow:inset 0 0 0 2px #111}
.as .as-tf__ed{position:relative;display:none;height:62px;margin-top:14px;border-radius:10px;background:#F3F3F3}
.as .is-hora .as-tf__ed{display:block}
.as .as-tf__color{position:absolute;left:12px;top:12px;width:6px;height:38px;border-radius:3px;background:var(--hc,#8CC63F)}
.as .as-tf__rango{position:absolute;left:28px;top:10px;font-size:12px;color:#777}
.as .as-tf__p{position:absolute;left:28px;top:28px;font-size:19px;font-weight:400}
.as .as-tf__u{position:absolute;left:104px;top:34px;font-size:12px;color:#999}
.as .as-tf__b{position:absolute;top:13px;width:36px;height:36px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #E3E3E3;display:grid;place-items:center;font:300 22px/1 Montserrat,sans-serif}
.as .as-tf__b.es-menos{right:58px}
.as .as-tf__b:not(.es-menos){right:14px}
.as .as-tf__esc{display:flex;align-items:center;gap:10px;margin-top:16px!important;font-size:11px;color:#888}
.as .as-tf__esc i{flex:1;height:5px;border-radius:3px;background:linear-gradient(90deg,#3DBE4B,#D6C21E 50%,#E0301E)}
.as .as-tf__nota{margin-top:8px!important;text-align:center;font-size:10.5px;line-height:1.5;color:#AAA}
.as .as-tf__anadir{width:160px;margin:4px auto 0}
.as [data-pant="tarifa"] .as-mov{padding-bottom:120px}

/* toque fuera de lo que pide la burbuja: el recuadro se agranda un momento y la burbuja se mueve */
.as .as-aro.is-avisa{animation:as-avisa .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes as-avisa{30%{box-shadow:0 0 0 4px #EE7F1B,0 0 0 16px rgba(238,127,27,.28)}}
/* la burbuja entera se mece hacia la pantalla (con translate, para no pisar el translateY de su posicion) */
.trydan-as .trydan-tour__globo .trydan-tour__pista{animation:none}
.trydan-as .trydan-tour__globo{animation:as-mece-v 1.6s cubic-bezier(.37,0,.63,1) infinite}
@keyframes as-mece-v{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media(min-width:60rem){.trydan-as .trydan-tour__globo{animation-name:as-mece-h}}
@keyframes as-mece-h{0%,100%{translate:0 0}50%{translate:-4px 0}}
.trydan-as .trydan-tour__globo.is-avisa{animation:as-meneo .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes as-meneo{20%,60%{translate:-5px 0}40%,80%{translate:5px 0}}

/* ---- ajustes del cargador (engranaje de la portada) ---- */
.as .as-engr{position:absolute;left:346px;top:240px;width:34px;height:34px;border-radius:50%;z-index:1}
.as [data-pant="ajustes"]{background:#EDEDED}
.as .as-cab__lapiz{position:absolute;left:142px;top:37px;width:22px!important;height:22px!important}
.as .as-ids{position:absolute;left:15px;top:228px;width:363px;height:50px;border-radius:12px;background:rgba(214,218,224,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:space-between;align-items:center;padding:0 16px}
.as .as-ids p{display:flex;flex-direction:column;align-items:center;gap:2px}
.as .as-ids p:first-child{align-items:flex-start;padding-left:18px}
.as .as-ids p:last-child{align-items:flex-end}
.as .as-ids span{font-size:12px;color:#222}
.as .as-ids b{font-size:13px;font-weight:400;color:#333}
.as .as-aj{position:absolute;left:15px;top:313px;width:363px;display:flex;flex-direction:column;gap:10px;padding-bottom:120px}
.as .as-luz{position:relative;height:117px;border-radius:14px;background:#fff}
.as .as-luz > .as-i{position:absolute;left:20px;top:16px;width:24px;height:24px}
.as .as-luz .as-sw{right:22px;top:16px}
.as .as-luz .as-riel{left:30px;right:22px;top:74px;height:5px;background:#111}
.as .as-luz .as-riel :is(i,s){background:#111}
.as .as-luz p{position:absolute;top:88px;left:24px;font-size:14px}
.as .as-luz p:last-child{left:auto;right:22px}
.as .as-aj__o{position:relative;height:60px;border-radius:12px;background:#fff}
.as .as-aj__o > .as-i:first-child{position:absolute;left:16px;top:17px;width:26px;height:26px}
.as .as-aj__o b{position:absolute;left:56px;top:11px;font-size:15.5px;font-weight:400}
.as .as-aj__o span{position:absolute;left:56px;top:33px;font-size:13px;color:#888}
.as .as-aj__o > .as-i:last-child{position:absolute;right:14px;top:18px;width:24px;height:24px}

/* escritorio: los pasos a la izquierda, el movil en medio y la burbuja a su derecha */
@media(min-width:60rem){
  .trydan-tour.trydan-as{grid-template-columns:minmax(0,1fr) 20rem 15rem}
  .trydan-tour.trydan-as{max-width:68rem}
  .trydan-as .trydan-tour__panel{grid-column:1;grid-row:1;padding-right:clamp(2rem,5vw,5rem)}
  .trydan-as .trydan-tour__escena{grid-column:2;grid-row:1}
}
.as .as-cdp > .as-cdp__amp{left:auto;top:6px;font-size:inherit;color:#333}

/* boton pequeño de la burbuja al acabar un paso */
.trydan-lp .trydan-as button.as-sig{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;white-space:nowrap;padding:6px 11px;border:0;border-radius:999px;
  background:#188038;color:#fff;font:600 12px/1.2 Montserrat,system-ui,sans-serif;cursor:pointer;transition:background-color .2s}
.trydan-lp .trydan-as button.as-sig:hover{background:#136C2E}
.trydan-lp .trydan-as button.as-sig svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.trydan-lp .trydan-as button.as-sig:hover svg{transform:translateX(2px)}
.trydan-lp .trydan-as button.as-sig:focus-visible{outline:2px solid #188038;outline-offset:2px}

/* ---- EcoCharging: boton de activar y plan de carga ---- */
.as .as-eco__act{margin:4px 13px 0;height:44px;border-radius:12px;font-size:15px;font-weight:600}
.as [data-pant="eco"] .as-mov{padding-bottom:120px}
.as [data-pant="plan"] .as-mov{padding-bottom:120px}
.as .as-pl__dur{position:relative;height:96px;margin:4px 15px 22px;border-radius:14px;background:#fff}
.as .as-pl__dur p{position:absolute;left:20px;top:22px;font-size:14.5px}
.as .as-pl__dur b{position:absolute;right:20px;top:16px;font-size:26px;font-weight:500;letter-spacing:-.01em}
.as .as-pl__dur span{position:absolute;left:20px;top:58px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:#3B956F}
.as .as-pl__dur span::before{content:"";width:7px;height:7px;border-radius:50%;background:#35A853}
.as .as-pl__t{margin:0 15px;font-size:16px;font-weight:500}
.as .as-pl__s{margin:4px 15px 0!important;font-size:12px;color:#A5A5A5}
.as .as-pl__graf{position:relative;display:flex;align-items:flex-end;gap:3px;height:120px;margin:26px 15px 0;padding-bottom:0;border-bottom:1px solid #CFCFCF}
.as .as-pl__b{flex:1;border-radius:3px 3px 0 0;background:#C9C9C9;transition:background-color .3s}
.as .as-pl__b.es-fuera{background:#DEDEDE}
.as .as-pl__b.es-carga{background:#35A853}
.as .as-pl__ahora,.as .as-pl__fin{position:absolute;top:-18px;bottom:0;border-left:1.5px dashed #888;font-size:10px;color:#666;padding-left:4px;white-space:nowrap}
.as .as-pl__fin{border-left-color:#111;color:#111;font-weight:600}
.as .as-pl__h{position:absolute;left:0;right:0;top:calc(100% + 6px);display:flex;justify-content:space-between;font-size:11px;color:#888}
.as .as-pl__ley{display:flex;gap:16px;margin:32px 15px 14px!important;font-size:12px;color:#555}
.as .as-pl__ley span{display:flex;align-items:center;gap:6px}
.as .as-pl__ley i{width:10px;height:10px;border-radius:2px;background:#C9C9C9}
.as .as-pl__ley i.es-carga{background:#35A853}
.as .as-pl__lista{display:flex;flex-direction:column;gap:8px;margin:0 15px 18px}
.as .as-pl__f{position:relative;height:48px;border-radius:12px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:14px}
.as .as-pl__f .as-i{width:20px;height:20px;color:#35A853}
.as .as-pl__f b{font-weight:400}
.as .as-pl__f span{margin-left:auto;color:#555}
.as .as-pl__off{margin:0 15px;height:44px;border:1.5px solid #E0201B;border-radius:12px;display:grid;place-items:center;font-size:14px;color:#E0201B}
.as .as-pl__fin{border-left:0;border-right:1.5px dashed #111;padding:0 4px 0 0;transform:translateX(-100%)}

/* ---- paso 1: limites de intensidad (captura limites-intensidad.png, con un poco mas de aire) ---- */
.as [data-pant="limites"] .as-mov{padding-bottom:120px}
.as .as-lim{position:relative;height:150px;margin:0 15px 14px;border-radius:14px;background:#fff}
.as .as-lim__t{position:absolute;left:20px;top:18px;font-size:13.5px;font-weight:500}
.as .as-lim > b{position:absolute;left:0;right:0;top:40px;text-align:center;font-size:32px;font-weight:400;line-height:1}
.as .as-lim__u{position:absolute;left:0;right:0;top:76px;text-align:center;font-size:13px;color:#555}
.as .as-lim .as-riel{left:24px;right:24px;top:110px;height:3px;background:#E2E2E2}
.as .as-lim .as-riel::after{content:"";position:absolute;left:0;right:0;top:-3px;height:9px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#C8C8C8 0 1.5px,transparent 1.5px calc(100% / 26));background-size:calc(100% + 1.5px) 100%}
.as .as-lim .as-riel :is(i,s){background:#111}
.as .as-lim .as-riel i{z-index:1}
.as .as-lim .as-riel s{width:22px;height:22px;margin:-11px 0 0 -11px;z-index:2;box-shadow:0 0 0 4px #fff}
.as .as-lim__ext{position:absolute;left:20px;right:20px;top:124px;display:flex;justify-content:space-between;font-size:11px;color:#999}
.as .as-lim__res{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 15px 18px!important;font-size:13px;color:#3B956F}
.as .as-lim__res::before{content:"";width:7px;height:7px;border-radius:50%;background:#35A853}
.as .as-lim__g{width:160px;height:38px;margin:0 auto;border-radius:9px;font-size:13px;letter-spacing:.06em}

/* ---- paso 7: tarifa de mercado ---- */
.as .as-tf__c .as-sel.es-borde{margin-bottom:0}
.as .as-tf__c > p + .as-sel{margin-top:0}
.as .as-tf__mer,.as .as-tf__idx,.as .as-tf__auto{display:none}
.as .is-mer .as-tf__mer{display:block}
.as .is-mer .as-tf__gen{display:none}
.as .is-idx .as-tf__idx,.as .is-tipo .as-tf__auto{display:block}
.as .as-tf__mer > p,.as .as-tf__idx > p,.as .as-tf__auto > p:first-child{margin:14px 0 8px!important;font-size:13.5px;color:#222}
.as .as-tf__mer > p:first-child{margin-top:0!important}
.as .as-tf__campo{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px;border-radius:9px;box-shadow:inset 0 0 0 1.5px #E2E2E2;font-size:14px;color:#888}
.as .as-tf__campo b{font-weight:400}
.as .as-tf__campo .as-i{width:16px;height:16px;padding:2px;border:1.5px solid #AAA;border-radius:50%;color:#888;stroke-width:3}
.as .as-tf__hora{display:flex;align-items:flex-start;gap:8px;margin-top:10px!important;font-size:11.5px;font-style:italic;color:#777;line-height:1.4}
.as .as-tf__hora i{flex:none;width:15px;height:15px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font:700 9.5px/1 Montserrat,sans-serif;font-style:normal}
.as .as-tf__anadir{margin-top:6px}

/* ventanita de opciones (selector de iOS) */
.as .as-m-pk{left:70px;width:253px;top:240px;padding:0;border-radius:14px;overflow:hidden}
.as .as-m-pk h4{padding:18px 16px 14px;text-align:center;font-size:16.5px;font-weight:600;border-bottom:1px solid #EDEDED}
.as .as-pk__o{position:relative;padding:13px 40px 13px 16px;font-size:14px}
.as .as-pk__o.es-on::after{content:"";position:absolute;right:18px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid #111;border-width:0 2px 2px 0;transform:rotate(45deg)}
.as .as-pk__bots{display:flex;border-top:1px solid #EDEDED}
.as .as-pk__bots span{flex:1;height:46px;display:grid;place-items:center;font-size:15.5px}
.as .as-pk__bots span + span{border-left:1px solid #EDEDED;font-weight:700}

/* tarifa general plana: precio de la energia con - y + */
.as .as-tf__plana{display:none;margin-top:16px}
.as .is-plana .as-tf__plana{display:block}
.as .as-tf__plana > p:first-child{margin-bottom:8px!important;font-size:13.5px;color:#222}
.as .as-tf__pr{position:relative;display:flex;align-items:baseline;gap:6px;height:56px;padding:12px 14px;border-radius:10px;background:#F4F4F4}
.as .as-tf__pr b{font-size:24px;font-weight:500;line-height:1.3}
.as .as-tf__pr span{font-size:13px;color:#888}
.as .as-tf__b2{position:absolute;top:10px;width:36px;height:36px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #E3E3E3;display:grid;place-items:center;font:300 22px/1 Montserrat,sans-serif;font-style:normal}
.as .as-tf__b2[data-as="menos"]{right:56px}
.as .as-tf__b2[data-as="mas"]{right:12px}
.as .as-tf__nota2{margin-top:8px!important;font-size:11.5px;color:#888}

/* ---- paso 1: limites de intensidad (captura limites-intensidad.png, con un poco mas de aire) ---- */
.as [data-pant="limites"] .as-mov{padding-bottom:120px}
.as .as-lim{position:relative;height:150px;margin:0 15px 14px;border-radius:14px;background:#fff}
.as .as-lim__t{position:absolute;left:20px;top:18px;font-size:13.5px;font-weight:500}
.as .as-lim > b{position:absolute;left:0;right:0;top:40px;text-align:center;font-size:32px;font-weight:400;line-height:1}
.as .as-lim__u{position:absolute;left:0;right:0;top:76px;text-align:center;font-size:13px;color:#555}
.as .as-lim .as-riel{left:24px;right:24px;top:110px;height:3px;background:#E2E2E2}
.as .as-lim .as-riel::after{content:"";position:absolute;left:0;right:0;top:-3px;height:9px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#C8C8C8 0 1.5px,transparent 1.5px calc(100% / 26));background-size:calc(100% + 1.5px) 100%}
.as .as-lim .as-riel :is(i,s){background:#111}
.as .as-lim .as-riel i{z-index:1}
.as .as-lim .as-riel s{width:22px;height:22px;margin:-11px 0 0 -11px;z-index:2;box-shadow:0 0 0 4px #fff}
.as .as-lim__ext{position:absolute;left:20px;right:20px;top:124px;display:flex;justify-content:space-between;font-size:11px;color:#999}
.as .as-lim__res{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 15px 18px!important;font-size:13px;color:#3B956F}
.as .as-lim__res::before{content:"";width:7px;height:7px;border-radius:50%;background:#35A853}
.as .as-lim__g{width:160px;height:38px;margin:0 auto;border-radius:9px;font-size:13px;letter-spacing:.06em}

/* ---- paso 7: tarifa de mercado ---- */
.as .as-tf__c .as-sel.es-borde{margin-bottom:0}
.as .as-tf__c > p + .as-sel{margin-top:0}
.as .as-tf__mer,.as .as-tf__idx,.as .as-tf__auto{display:none}
.as .is-mer .as-tf__mer{display:block}
.as .is-mer .as-tf__gen{display:none}
.as .is-idx .as-tf__idx,.as .is-tipo .as-tf__auto{display:block}
.as .as-tf__mer > p,.as .as-tf__idx > p,.as .as-tf__auto > p:first-child{margin:14px 0 8px!important;font-size:13.5px;color:#222}
.as .as-tf__mer > p:first-child{margin-top:0!important}
.as .as-tf__campo{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px;border-radius:9px;box-shadow:inset 0 0 0 1.5px #E2E2E2;font-size:14px;color:#888}
.as .as-tf__campo b{font-weight:400}
.as .as-tf__campo .as-i{width:16px;height:16px;padding:2px;border:1.5px solid #AAA;border-radius:50%;color:#888;stroke-width:3}
.as .as-tf__hora{display:flex;align-items:flex-start;gap:8px;margin-top:10px!important;font-size:11.5px;font-style:italic;color:#777;line-height:1.4}
.as .as-tf__hora i{flex:none;width:15px;height:15px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font:700 9.5px/1 Montserrat,sans-serif;font-style:normal}
.as .as-tf__anadir{margin-top:6px}

/* ventanita de opciones (selector de iOS) */
.as .as-m-pk{left:70px;width:253px;top:240px;padding:0;border-radius:14px;overflow:hidden}
.as .as-m-pk h4{padding:18px 16px 14px;text-align:center;font-size:16.5px;font-weight:600;border-bottom:1px solid #EDEDED}
.as .as-pk__o{position:relative;padding:13px 40px 13px 16px;font-size:14px}
.as .as-pk__o.es-on::after{content:"";position:absolute;right:18px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid #111;border-width:0 2px 2px 0;transform:rotate(45deg)}
.as .as-pk__bots{display:flex;border-top:1px solid #EDEDED}
.as .as-pk__bots span{flex:1;height:46px;display:grid;place-items:center;font-size:15.5px}
.as .as-pk__bots span + span{border-left:1px solid #EDEDED;font-weight:700}

/* tarifa general plana: precio de la energia con - y + */
.as .as-tf__plana{display:none;margin-top:16px}
.as .is-plana .as-tf__plana{display:block}
.as .as-tf__plana > p:first-child{margin-bottom:8px!important;font-size:13.5px;color:#222}
.as .as-tf__pr{position:relative;display:flex;align-items:baseline;gap:6px;height:56px;padding:12px 14px;border-radius:10px;background:#F4F4F4}
.as .as-tf__pr b{font-size:24px;font-weight:500;line-height:1.3}
.as .as-tf__pr span{font-size:13px;color:#888}
.as .as-tf__b2{position:absolute;top:10px;width:36px;height:36px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #E3E3E3;display:grid;place-items:center;font:300 22px/1 Montserrat,sans-serif;font-style:normal}
.as .as-tf__b2[data-as="menos"]{right:56px}
.as .as-tf__b2[data-as="mas"]{right:12px}
.as .as-tf__nota2{margin-top:8px!important;font-size:11.5px;color:#888}

/* ---- movil: carrusel, una pantalla por paso, del tamaño de los moviles de la landing; la burbuja encima ---- */
.trydan-tour.trydan-as.is-car{display:block}
.trydan-as .as-car{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 calc(-1 * var(--t-gutter-sec,1.5rem));padding:4px var(--t-gutter-sec,1.5rem) 8px;scroll-padding:0 var(--t-gutter-sec,1.5rem)}
.trydan-as .as-car::-webkit-scrollbar{display:none}
.trydan-as .as-car__it{flex:0 0 232px;scroll-snap-align:start}
.trydan-as .as-car__ph{display:flex;flex-direction:column}
.trydan-as .as-car__ph[hidden]{display:none}
.trydan-as.is-car .trydan-tour__escena{width:232px;display:flex;flex-direction:column-reverse}
.trydan-as.is-car .trydan-tour__globo,.trydan-as .as-car__ph .trydan-tour__globo{margin:0 0 14px;height:122px;overflow:hidden;padding:12px 14px}
.trydan-as.is-car .trydan-tour__globo::before,.trydan-as .as-car__ph .trydan-tour__globo::before{top:auto;bottom:-6px}
.trydan-as .as-car__ph .trydan-tour__globo{animation:none}
.trydan-as.is-car .trydan-tour__cab{font-size:10.5px;letter-spacing:.12em}
.trydan-as.is-car .trydan-lp .trydan-tour__pista,.trydan-lp .trydan-as.is-car .trydan-tour__pista{font-size:13px}
.trydan-as.is-car .trydan-tour__panel{display:flex;justify-content:center;margin-top:18px}
.trydan-as .as-car__ph .trydan-tour__pantalla{pointer-events:none}

/* carga programada clasica: Guardar */
.as .as-tem{transition:height .35s cubic-bezier(.22,1,.36,1)}
.as .as-tem.is-ed{height:243px}
.as .as-tem__g{position:absolute;left:22px;right:22px;top:183px;height:42px;border-radius:12px;font-size:15px;font-weight:600;opacity:0;visibility:hidden;transition:opacity .25s ease .1s,visibility 0s .35s}
.as .as-tem.is-ed .as-tem__g{opacity:1;visibility:visible;transition:opacity .25s ease .1s}
/* cambio de paso: fundido de la pantalla entera */
.as{transition:opacity .22s ease}
.as.is-fundido{opacity:0}
.as.sin-anim,.as.sin-anim *,.as.sin-anim *::before,.as.sin-anim *::after{transition:none!important}

/* ---- movil: carrusel en abanico (el activo grande al centro; los de los lados pequeños, girados y apagados) ---- */
.trydan-tour.trydan-as.is-cf{display:block}
.trydan-as .as-cf{--w:min(15.5rem,62vw);position:relative;height:calc(var(--w) * 812 / 393 + 8px);margin:0 calc(-1 * var(--t-gutter-sec,1.5rem));
  perspective:1200px;overflow:hidden;overflow-x:clip;overflow-y:visible;touch-action:pan-y}   /* recorta solo los lados: la sombra del movil sale por abajo */
.trydan-as .as-cf__it{position:absolute;left:50%;top:4px;width:var(--w);margin-left:calc(var(--w) / -2);cursor:pointer;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s,filter .4s}
.trydan-as .as-cf__it:not(.is-on){filter:saturate(.6) brightness(.97);opacity:.6}
.trydan-as .as-cf__it.es-lejos{opacity:0;pointer-events:none}
.trydan-as .as-cf__it.is-on{cursor:auto}
.trydan-as .as-cf__it .trydan-tour__pantalla{width:100%}
.trydan-as .as-cf__it:not(.is-on) .trydan-tour__pantalla{pointer-events:none;box-shadow:0 20px 40px -26px rgba(21,19,20,.4),0 0 0 1px rgba(21,19,20,.06)}
.trydan-as.is-cf .trydan-tour__escena{width:100%;position:relative}
/* la burbuja flota dentro de la pantalla, con el pico hacia el control */
.trydan-as.is-cf .trydan-tour__globo{position:absolute;left:10px;right:10px;top:0;z-index:12;margin:0;padding:10px 12px;border-radius:14px;
  box-shadow:0 10px 28px rgba(21,19,20,.22),0 0 0 1px rgba(21,19,20,.05);transition:top .45s cubic-bezier(.22,1,.36,1),opacity .2s}
.trydan-as.is-cf .trydan-tour__globo::before{left:50%;top:auto;bottom:-6px;margin-left:-6px}
.trydan-as.is-cf .trydan-tour__globo.es-abajo::before{top:-6px;bottom:auto}
.trydan-as.is-cf .trydan-tour__cab{display:none}
.trydan-lp .trydan-as.is-cf .trydan-tour__pista{font-size:12.5px;padding-left:16px}
.trydan-lp .trydan-as.is-cf .trydan-tour__pista::before{top:5px}
.trydan-lp .trydan-as.is-cf .trydan-tour__sigue{padding-left:16px;font-size:11px;margin-top:3px}
.trydan-as.is-cf .trydan-tour__globo{animation-name:as-mece-v}
/* titulo y frase del paso debajo, como el carrusel de la app de la landing */
.trydan-as .as-cf__pie{max-width:20rem;margin:18px auto 0;text-align:center;min-height:5.2em}
.trydan-lp .trydan-as .as-cf__t{margin:0;font-size:15px;font-weight:600;color:var(--t-ink,#2E2E2A)}
.trydan-lp .trydan-as .as-cf__d{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--t-body,#5F5D57)}
.trydan-as.is-cf .trydan-tour__panel{display:flex;justify-content:center;margin-top:14px}

/* plan de carga: la grafica se monta al abrirse (barras que crecen, marcas, y las horas elegidas se encienden en verde
   de la mas barata a la menos); cada tramo de la lista aparece con su barra */
.as [data-pant="plan"].is-on .as-pl__b{transform-origin:bottom;animation:as-crece .5s cubic-bezier(.22,1,.36,1) calc(450ms + var(--d,0ms)) both}
.as [data-pant="plan"].is-on .as-pl__b.es-carga{animation:as-crece .5s cubic-bezier(.22,1,.36,1) calc(450ms + var(--d,0ms)) both,as-elige .5s ease var(--v,0ms) both}
.as [data-pant="plan"].is-on .as-pl__ahora,.as [data-pant="plan"].is-on .as-pl__fin{animation:as-aparece .4s ease 1000ms both}
.as [data-pant="plan"].is-on .as-pl__f{animation:as-sube .45s cubic-bezier(.22,1,.36,1) var(--v,0ms) both}
@keyframes as-crece{from{transform:scaleY(0)}}
@keyframes as-elige{0%{background:#C9C9C9}45%{background:#35A853;transform:scaleY(1.12)}100%{background:#35A853;transform:none}}
@keyframes as-aparece{from{opacity:0}}
@keyframes as-sube{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.as [data-pant="plan"].is-on .as-pl__b,.as [data-pant="plan"].is-on .as-pl__f,.as [data-pant="plan"].is-on .as-pl__ahora,.as [data-pant="plan"].is-on .as-pl__fin{animation:none!important}}

/* ventana de guardado: «Guardando…» con un aro que gira y, a los 0,9 s, el check verde que salta y el texto final */
.as .as-m-ok{top:250px;padding:34px 26px 24px;text-align:center}
.as .as-ok__c{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;color:#fff}
.as .as-ok__c::before{content:"";position:absolute;inset:0;border-radius:50%;background:#35A853}
.as .as-ok__c .as-i{position:relative;width:32px;height:32px;stroke-width:2.6}
.as .as-ok__giro{position:absolute;inset:4px;border-radius:50%;border:4px solid #E6E6E6;border-top-color:#111}
.as .as-ok__tx{display:grid}
.as .as-ok__tx h4{grid-area:1/1;font-size:18px;font-weight:600;color:#111}
.as .as-m-ok [data-ok="d"]{margin:8px 0 24px!important;font-size:14px;color:#6B6B6B;min-height:1.4em}
.as .as-m-ok .as-boton{height:48px;border-radius:12px;font-size:15px;font-weight:600}
.as .as-m-ok.is-on .as-ok__giro{animation:as-gira .7s linear infinite,as-fuera .2s ease .9s both}
.as .as-m-ok.is-on .as-ok__c::before{animation:as-salta .55s cubic-bezier(.34,1.56,.64,1) 1s both}
.as .as-m-ok.is-on .as-ok__c .as-i{stroke-dasharray:30;animation:as-traza .4s ease 1.25s both}
.as .as-ok__c::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #35A853;opacity:0}
.as .as-m-ok.is-on .as-ok__c::after{animation:as-onda .8s ease-out 1.15s}
.as .as-m-ok.is-on .as-ok__ya{animation:as-sale .3s ease .9s both}
.as .as-m-ok.is-on .as-ok__fin{animation:as-sube .45s cubic-bezier(.22,1,.36,1) 1.05s both}
.as .as-m-ok.is-on [data-ok="d"]{animation:as-sube .45s cubic-bezier(.22,1,.36,1) 1.15s both}
.as .as-m-ok.is-on .as-boton{animation:as-sube .45s cubic-bezier(.22,1,.36,1) 1.25s both}
.as .as-ok__ya::after{content:"...";display:inline-block;width:1em;text-align:left}
.as .as-m-ok.is-on .as-ok__ya::after{animation:as-puntos .9s steps(1) both}
@keyframes as-puntos{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
@keyframes as-gira{to{transform:rotate(360deg)}}
@keyframes as-sale{to{opacity:0;transform:translateY(-12px);visibility:hidden}}
@keyframes as-onda{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes as-fuera{to{opacity:0;visibility:hidden}}
@keyframes as-salta{from{transform:scale(.3);opacity:0}}
@keyframes as-traza{from{stroke-dashoffset:30}}
@media (prefers-reduced-motion:reduce){.as .as-m-ok.is-on *,.as .as-m-ok.is-on .as-ok__c::before,.as .as-m-ok.is-on .as-ok__c::after{animation:none!important}.as .as-ok__giro,.as .as-ok__ya{display:none}}

/* mensaje de fin de paso: tick verde en lugar del punto naranja que late */
.trydan-as .trydan-tour__globo.es-listo .trydan-tour__pista{padding-left:24px}
.trydan-as .trydan-tour__globo.es-listo .trydan-tour__pista::before{top:2px;width:16px;height:16px;animation:as-salta .45s cubic-bezier(.34,1.56,.64,1) both;
  background:#35A853 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.trydan-lp .trydan-as.is-cf .trydan-tour__globo.es-listo .trydan-tour__pista{padding-left:22px}
.trydan-lp .trydan-as.is-cf .trydan-tour__globo.es-listo .trydan-tour__pista::before{top:1px;width:15px;height:15px}

/* sesion de carga (captura del 04/11): sustituye a «Vehiculo conectado» y va encima de Control de potencia */
.as .as-carga,.as .as-v1{display:none}
.as.is-carga .as-veh,.as.is-carga .as-v0{display:none}
.as.is-carga .as-v1{display:revert}
.as.is-carga .as-carga{display:block;order:-2}
.as.is-carga .as-cdp{order:-1}
.as .as-carga{position:relative;padding:18px 16px 16px;border-radius:12px;background:#F8F8F8}
.as .as-carga__t{font-size:15px;font-weight:500;color:#118A11}
.as .as-carga__bar{display:block;height:9px;margin:9px 0 17px;border-radius:5px;background:#CFCFCF;overflow:hidden}
.as .as-carga__bar s{display:block;height:100%;border-radius:5px;background:#35A853;animation:as-carga-bar 5s ease-in-out infinite}
@keyframes as-carga-bar{0%{width:0}88%,100%{width:100%}}
.as .as-carga ul{display:flex;gap:8px}
.as .as-carga li{position:relative;flex:1;height:89px;border-radius:10px;background:#EAEAEA}
.as .as-carga li .as-i{position:absolute;left:10px;top:12px;width:24px;height:24px;color:#9A9A9A;stroke-width:1.4}
.as .as-carga li b{position:absolute;left:10px;top:48px;font-size:15px;font-weight:500;color:#111}
.as .as-carga li span{position:absolute;left:10px;top:66px;font-size:13px;color:#8A8A8A}
.as .as-carga__info{position:absolute;right:8px;top:8px;width:15px;height:15px;border-radius:50%;background:#555;color:#fff;font:600 9.5px/15px Montserrat,sans-serif;font-style:normal;text-align:center}
.as .as-carga__pie{display:flex;gap:10px;margin-top:16px!important}
.as .as-carga__tiempo{display:flex;align-items:center;gap:20px;width:116px;height:38px;padding:0 14px;border-radius:19px;background:#fff;font-size:13px;color:#555}
.as .as-carga__tiempo .as-i{width:18px;height:18px;color:#888}
.as .as-carga__tiempo b{font-weight:400;font-variant-numeric:tabular-nums}
.as .as-carga__pausa{position:relative;flex:1;display:grid;place-items:center;height:38px;border-radius:19px;background:#000;color:#fff;font-size:14.5px;font-weight:500}
.as .as-carga__pausa i{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#000}
.as .as-carga__pausa .as-i{width:16px;height:16px;stroke-width:2.6}
@media (prefers-reduced-motion:reduce){.as .as-carga__bar s{animation:none;width:78%}}
.as .as-cdp li b i{font-style:normal}
.as.is-carga .as-cdp li:nth-child(2) b.as-v1{top:14px;color:#111;font-weight:500}

/* ==== appsim-sec.css ==== */
/* seccion #app con el simulador (04/11/2026): la cabecera de siempre (antetitulo, titulo y texto, mismos estilos)
   centrada encima, y el simulador debajo en lugar del carrusel de 4 moviles */
.trydan-app2.trydan-app2--sim{padding-right:var(--t-gutter-sec)}
.trydan-app2--sim>.wp-block-group__inner-container{grid-template-columns:minmax(0,1fr)}
.trydan-app2--sim .trydan-app2__txt{padding-right:0;display:flex;flex-direction:column;align-items:center;text-align:center}
/* .trydan-lp va en la propia seccion: por eso .trydan-lp.trydan-app2--sim, que ademas gana a .trydan-lp .trydan-body */
.trydan-lp.trydan-app2--sim .trydan-h2{margin-inline:auto}
.trydan-lp.trydan-app2--sim .trydan-body{max-width:52ch;margin-inline:auto}

/* ==== reparto.css · ventana de potencia, «Mira el reparto de energía desde la app» (04/11/2026) ====
   Propuesta C de Lienzo: el movil entero en el centro con el flujo sin fotovoltaica (solo la red encendida)
   y tres notas con las cifras del ejemplo de la ventana (4,60 kW contratados, casa 1,20, coche 3,40). */
.trydan-lp .trydan-dia.es-reparto{text-align:center}
.trydan-lp .trydan-dia.es-reparto .trydan-dia__p{margin-inline:auto}
.trydan-lp .trydan-rep{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.5rem,3.5vw,3.5rem);align-items:center;margin-top:clamp(2rem,4vw,3rem);text-align:left}
.trydan-lp .trydan-rep__col{display:flex;flex-direction:column;gap:3rem}
.trydan-lp .trydan-rep__col.es-izq{align-items:flex-end;text-align:right}
.trydan-lp .trydan-rep__tel{margin:0}
.trydan-lp .trydan-rep__svg{display:block;width:17rem;height:auto;filter:drop-shadow(0 40px 50px rgba(21,19,20,.22)) drop-shadow(0 10px 18px rgba(21,19,20,.12))}
.trydan-lp .trydan-rep__nota{max-width:16rem}
.trydan-lp .trydan-rep__kw{margin:0 0 .15rem;font-size:1.75rem;font-weight:300;line-height:1.2;letter-spacing:-.02em;color:var(--t-ink);font-variant-numeric:tabular-nums}
.trydan-lp .trydan-rep__t{margin:0;font-size:var(--t-fs-p);font-weight:600;color:var(--t-ink)}
.trydan-lp .trydan-rep__p{margin:.35rem 0 0;font-size:var(--t-fs-sec);line-height:1.55;color:var(--t-body);text-wrap:pretty}
/* dentro del movil: lo mismo que el flujo de la pagina y del simulador */
.trydan-rep-linea{fill:none;stroke-width:1.6}
.trydan-rep-corre{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:0 12.5;animation:trydan-rep-corre 1.6s linear infinite}
.trydan-rep-halo{transform-box:fill-box;transform-origin:center;animation:trydan-rep-halo 3s ease-in-out infinite}
.trydan-rep-caja{animation:trydan-rep-caja 3s ease-in-out infinite}
.trydan-rep-ic{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trydan-rep-ic.es-off{stroke:#3a3a3a}
.trydan-rep-kw{fill:#fff;font:500 9px Montserrat,sans-serif;text-anchor:middle}
.trydan-rep-tit{font:600 16px Montserrat,sans-serif;fill:#111}
.trydan-rep-nav{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trydan-rep-nav.es-on{stroke:#E3141B}
.trydan-rep-navt{fill:#fff;font:500 9.5px Montserrat,sans-serif;text-anchor:middle}
.trydan-rep-navt.es-on{fill:#E3141B}
@keyframes trydan-rep-corre{to{stroke-dashoffset:-100}}
@keyframes trydan-rep-halo{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes trydan-rep-caja{0%,100%{stroke-opacity:.7}50%{stroke-opacity:1}}
@media (prefers-reduced-motion:reduce){.trydan-rep-corre,.trydan-rep-halo,.trydan-rep-caja{animation:none}}
/* movil: el telefono arriba y las tres notas debajo, en lista, con aire a los lados */
@media(max-width:47.999rem){
  .trydan-lp .trydan-rep{grid-template-columns:minmax(0,1fr);gap:0}
  .trydan-lp .trydan-rep__tel{order:-1;justify-self:center;margin-bottom:2rem}
  .trydan-lp .trydan-rep__svg{width:min(15rem,72vw)}
  .trydan-lp .trydan-rep__col{gap:0}
  .trydan-lp .trydan-rep__col.es-izq{align-items:stretch;text-align:left}
  .trydan-lp .trydan-rep__nota{max-width:none;padding:1.1rem 1.25rem;border-top:1px solid var(--t-linea)}
  .trydan-lp .trydan-rep__col:last-child .trydan-rep__nota:last-child{border-bottom:1px solid var(--t-linea)}
}

/* ==== controlbox.css · ventana de potencia, «¿Cómo lo hace?» (04/11/2026, v3) ====
   La foto del ControlBox va en una tarjeta negra, fundida en un degradado hacia el texto. FIJA: es el primer
   fotograma de la animacion de la v1, que es el encuadre que gusto (girada -2,5° y algo desplazada); el
   movimiento se probo y se descarto. */
.trydan-lp .trydan-cbx{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:23rem;margin:clamp(1.5rem,3vw,2rem) 0 0;border-radius:var(--t-r-media);overflow:hidden;background:#141414;color:#fff}
.trydan-lp .trydan-cbx__txt{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:.75rem;padding:clamp(1.5rem,3vw,2.5rem)}
.trydan-lp .trydan-cbx .trydan-pot__sello{align-self:flex-start;font-size:.625rem;background:#35A853;color:#fff}
.trydan-lp .trydan-cbx__h{margin:0;font-size:clamp(1.25rem,1rem + .8vw,1.75rem);font-weight:300;line-height:1.2;letter-spacing:-.015em;color:#fff}
.trydan-lp .trydan-cbx__p{margin:0;max-width:34ch;font-size:var(--t-fs-sec);line-height:1.55;color:rgba(255,255,255,.72)}
.trydan-cbx__foto{position:absolute;inset:0 0 0 30%;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
/* la foto sobra un 12 % por cada lado para que el giro no deje ver su borde;
   max-width:none porque el tema limita todas las imagenes al 100 % y eso la recortaba */
.trydan-cbx__mov{position:absolute;inset:-12%}
.trydan-lp .trydan-cbx__mov img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:42% 50%;border-radius:0;
  filter:brightness(.78) contrast(1.12);transform-origin:55% 50%;transform:rotate(-2.5deg) translate3d(1.5%,0,0)}
@media(max-width:47.999rem){
  .trydan-lp .trydan-cbx{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:13rem}
  .trydan-cbx__foto{inset:0 0 auto 0;height:16rem;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
}

/* ==== tec-oscuro.css · Especificaciones tecnicas en negro (04/11/2026) ====
   Antes iba en beige, igual que Contacto, y las dos se leian como una sola seccion. En negro, como la tarjeta
   del ControlBox, la ficha tecnica queda como pieza de producto entre el blanco de instalacion y el beige del contacto.
   Se redefinen los tokens dentro de la seccion: titulos, lineas, chevrones y filas los heredan. */
.trydan-lp.trydan-tec2{background:#141414;--t-ink:#fff;--t-body:rgba(255,255,255,.66);--t-tenue:rgba(255,255,255,.45);--t-linea:rgba(255,255,255,.14)}
.trydan-lp.trydan-tec2 a.trydan-tec2__pdf,.trydan-lp.trydan-tec2 a.trydan-tec2__pdf:is(:visited,:hover,:focus){background:#fff;color:#141414}
.trydan-lp.trydan-tec2 a.trydan-tec2__pdf:hover{background:#E9E7E3}
.trydan-lp.trydan-tec2 .trydan-tec2__chev{background:rgba(255,255,255,.1);color:#fff}
.trydan-lp.trydan-tec2 .trydan-tec2__d summary:hover .trydan-tec2__chev{background:rgba(255,255,255,.18)}
.trydan-lp.trydan-tec2 .trydan-tec2__cuerpo dl div{border-top-color:rgba(255,255,255,.08)}

/* ==== explora-movil.css · «Explora Trydan» en movil, version provisional sin fotos (04/11/2026, Lienzo pag. 12, C) ====
   Arriba, las siete como chips que se deslizan; debajo, una tarjeta oscura con el video en bucle y, bajo el,
   el texto de la que esta activa. Barritas de historia sobre el video: al llegar a la seccion pasan solas.
   El texto (burbuja) va en absoluto respecto a la escena para salir del carril de chips, que hace scroll.
   Cuando lleguen las fotos: quitar el display:none de .trydan-exp__slide y mostrar la del .is-on sobre el video (B). */
.trydan-exp__hist{display:none}
@media(max-width:47.999rem){
  .trydan-lp.trydan-exp-sec .trydan-exp__escena{position:relative;display:flex;flex-direction:column;aspect-ratio:auto;background:none;border-radius:0;overflow:visible;padding-bottom:11.5rem}
  .trydan-lp.trydan-exp-sec .trydan-exp__ui{display:contents}
  .trydan-lp.trydan-exp-sec .trydan-exp__nav{display:none}
  .trydan-lp.trydan-exp-sec .trydan-exp__lista{order:-1;flex:none;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.5rem;margin:0 calc(-1 * var(--t-gutter-sec,1rem)) 1rem;padding:0 var(--t-gutter-sec,1rem);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .trydan-lp.trydan-exp-sec .trydan-exp__lista::-webkit-scrollbar{display:none}
  .trydan-lp.trydan-exp-sec .trydan-exp__it{flex:none}
  .trydan-lp.trydan-exp-sec button.trydan-exp__b,.trydan-lp.trydan-exp-sec .trydan-exp__it.is-on button.trydan-exp__b{display:inline-flex;align-items:center;gap:0;padding:.55rem .9rem;border:0;border-radius:999px;background:rgba(46,46,42,.06);color:#2E2E2A;font-size:.8125rem;font-weight:500;line-height:1.2;white-space:nowrap;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .trydan-lp.trydan-exp-sec .trydan-exp__it.is-on button.trydan-exp__b,
  .trydan-lp.trydan-exp-sec .trydan-exp:not(:has(.trydan-exp__it.is-on)) .trydan-exp__it:first-child button.trydan-exp__b{background:#2E2E2A;color:#fff}
  .trydan-lp.trydan-exp-sec button.trydan-exp__b:focus-visible{outline:2px solid #2E2E2A;outline-offset:2px}
  .trydan-lp.trydan-exp-sec .trydan-exp__mas{display:none}
  .trydan-lp.trydan-exp-sec .trydan-exp__video,.trydan-lp.trydan-exp-sec .trydan-exp__video.is-on{display:block;position:relative;width:100%;margin:0;aspect-ratio:16 / 9;border-radius:var(--t-r-media,20px) var(--t-r-media,20px) 0 0;overflow:hidden;opacity:1}
  .trydan-lp.trydan-exp-sec .trydan-exp__slide,.trydan-lp.trydan-exp-sec .trydan-exp__slide.is-on{display:none}
  .trydan-lp.trydan-exp-sec .trydan-exp__burbuja{display:none;position:absolute;left:0;right:0;bottom:0;height:11.5rem;max-width:none;margin:0;padding:1.25rem;border:0;border-radius:0 0 var(--t-r-media,20px) var(--t-r-media,20px);background:#141414;color:rgba(255,255,255,.75);font-size:.875rem;line-height:1.55;text-align:left;box-shadow:none;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;cursor:pointer}
  .trydan-lp.trydan-exp-sec .trydan-exp__burbuja b{display:block;margin:0 0 .45rem;font-size:1.25rem;font-weight:500;letter-spacing:-.01em;color:#fff}
  .trydan-lp.trydan-exp-sec .trydan-exp__it.is-on .trydan-exp__burbuja,
  .trydan-lp.trydan-exp-sec .trydan-exp:not(:has(.trydan-exp__it.is-on)) .trydan-exp__it:first-child .trydan-exp__burbuja{display:block}
  /* el fondo negro del texto es fijo (en la escena) y solapa 2px bajo el video: al cambiar solo funde el texto,
     sin que la caja aparezca ni se mueva (la animacion de escritorio dejaba ver un hueco) */
  .trydan-lp.trydan-exp-sec .trydan-exp__escena::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:calc(11.5rem + 2px);border-radius:0 0 var(--t-r-media,20px) var(--t-r-media,20px);background:#141414;pointer-events:none}
  .trydan-lp.trydan-exp-sec .trydan-exp__video{z-index:1}
  .trydan-lp.trydan-exp-sec .trydan-exp__burbuja,.trydan-lp.trydan-exp-sec .trydan-exp__it.is-on .trydan-exp__burbuja{z-index:1;background:transparent;animation:trydan-exp-texto .35s ease both}
  /* barritas de historia sobre el video */
  .trydan-exp__hist{position:absolute;z-index:2;top:.75rem;left:.75rem;right:.75rem;display:flex;gap:4px;pointer-events:none}
  .trydan-exp__hist span{flex:1;height:3px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.3)}
  .trydan-exp__hist i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center}
  .trydan-exp__hist .es-hecha i{transform:scaleX(1)}
  .trydan-exp__hist .es-ahora i{animation:trydan-hist var(--dur,6s) linear forwards}
  .trydan-exp__hist.es-pausa i{animation-play-state:paused}
}
@keyframes trydan-hist{to{transform:scaleX(1)}}
@keyframes trydan-exp-texto{from{opacity:0}}
@media(max-width:47.999rem) and (prefers-reduced-motion:reduce){
  .trydan-exp__hist .es-ahora i{animation:none;transform:scaleX(1)}
  .trydan-lp.trydan-exp-sec .trydan-exp__it.is-on .trydan-exp__burbuja{animation:none}
}
/* pulsacion propia en movil (04/11/2026): sin el resaltado azul nativo de Android; el chip se encoge un poco
   y la tarjeta se atenua mientras se toca: el video se oscurece (su opacidad esta fijada con !important en
   .trydan-exp .trydan-exp__video) y el texto baja levemente la opacidad */
@media(max-width:47.999rem){
  .trydan-lp.trydan-exp-sec .trydan-exp__escena,
  .trydan-lp.trydan-exp-sec button.trydan-exp__b,
  .trydan-lp.trydan-exp-sec .trydan-exp__video,
  .trydan-lp.trydan-exp-sec .trydan-exp__burbuja{-webkit-tap-highlight-color:transparent}
  .trydan-lp.trydan-exp-sec button.trydan-exp__b{transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .2s ease,color .2s ease}
  .trydan-lp.trydan-exp-sec button.trydan-exp__b:active{transform:scale(.94)}
  .trydan-lp.trydan-exp-sec .trydan-exp__video{transition:filter .2s ease}
  .trydan-lp.trydan-exp-sec .trydan-exp__video:active{filter:brightness(.78)}
  .trydan-lp.trydan-exp-sec .trydan-exp__burbuja{transition:opacity .2s ease}
  .trydan-lp.trydan-exp-sec .trydan-exp__burbuja:active{opacity:.82}
}
@media(max-width:47.999rem) and (prefers-reduced-motion:reduce){
  .trydan-lp.trydan-exp-sec button.trydan-exp__b:active{transform:none}
}

/* perfiles de carga: tarjeta aparte bajo la caja de potencia (05/11/2026) */
.trydan-lp .trydan-pft{display:flex;gap:.875rem;align-items:flex-start;text-align:left;background:var(--t-bg);border-radius:1.25rem;margin-top:.75rem;padding:1.125rem clamp(1.125rem,4.5vw,2rem) 1.25rem}
.trydan-lp .trydan-pft__ico{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--t-acc-suave);display:grid;place-items:center;margin-top:.0625rem}
.trydan-lp .trydan-pft__ico svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:var(--t-accent);stroke-width:1.8;stroke-linecap:round}
.trydan-lp .trydan-pft__h{margin:0;font-size:.9375rem;font-weight:600;line-height:1.3;color:#2E2E2A;letter-spacing:0}
.trydan-lp .trydan-pft__p{margin:.25rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--t-body)}

/* control de potencia: tipo de instalacion, resistencia BUS, Guardar y lista larga del selector (09/11) */
.as .as-cp__ins{display:block;padding:18px 22px 16px}
.as .as-cp__ins > p{margin-bottom:4px;font-size:14px;color:#222}
.as .as-cp__ins > p b{font-weight:600}
.as .as-cp__r{display:flex;align-items:center;gap:12px;height:40px;font-size:13.5px;color:#333}
.as .as-cp__r i{position:relative;flex:none;width:19px;height:19px;border:2px solid #111;border-radius:50%;box-sizing:border-box;background:#fff}
.as .as-cp__r.es-on i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#111}
.as .as-cp__chk.es-on i{background:#111}
.as .as-cp__chk.es-on i::after{inset:auto;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;border-radius:0;background:none;transform:rotate(45deg)}
.as .as-cp__r sup,.as .as-cp__ins small sup{color:#D0342C;font-size:10px}
.as .as-cp__ins small{display:block;margin-top:6px;font-size:11.5px;color:#555}
.as .as-cp__bus{min-height:0;padding:16px 22px}
.as .as-cp__bus > p{font-size:12.5px;line-height:1.4}
.as .as-cp__bus > p b{font-weight:600}
.as .as-cp__bus u{display:block;font-size:11.5px;color:#666}
.as .as-cp__guardar{width:146px;margin:22px auto 120px}
.as .as-m-pk.es-largo [data-pk="ops"]{max-height:222px;overflow-y:auto;scrollbar-width:none}
.as .as-m-pk.es-largo [data-pk="ops"]::-webkit-scrollbar{display:none}

/* EcoCharging: porcentaje de bateria a anadir, de 0 a 100 % (09/11) */
.as .as-pct{position:relative;height:42px;margin-top:8px}
.as .as-pct .as-riel{left:6px;right:6px;top:12px;height:5px;background:#E6E6E6}
.as .as-pct .as-riel :is(i,s){background:#CFCFCF;transition:background-color .3s}
.as .as-op.es-on .as-pct .as-riel :is(i,s){background:#111}
.as .as-pct .as-riel s{width:20px;height:20px;margin:-10px 0 0 -10px;box-shadow:0 0 0 3px #fff}
.as .as-pct span{position:absolute;top:26px;left:0;font-size:11px;color:#999}
.as .as-pct span:last-child{left:auto;right:0}

/* opcion A (09/11): el instalador vuelve a ser una seccion propia, con aire, fondo blanco y la foto a sangre por la izquierda */
.trydan-lp.trydan-vs2{padding-bottom:clamp(4rem,8vw,7rem)}
.trydan-lp.trydan-ins2{background:#fff;padding:clamp(4rem,8vw,7rem) 0}
.trydan-ins3{max-width:none;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.trydan-lp .trydan-ins3__foto{margin:0;border-radius:0}
.trydan-ins3__txt{padding:2rem var(--t-gutter-sec,1.25rem) 0}
.trydan-ins3__exp{background:transparent}
@media(min-width:56rem){
 .trydan-ins3{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(34rem,46vw,42rem)}
 .trydan-lp .trydan-ins3__foto{margin:0;border-radius:0 24px 24px 0}
 .trydan-ins3__txt{padding:clamp(2rem,4vw,4rem) var(--t-gutter-sec,2rem) clamp(2rem,4vw,4rem) clamp(2.5rem,6vw,6rem);max-width:44rem}
}

/* lista larga: manita que invita a deslizar (09/11); se va al deslizar */
.as .as-m-pk.es-largo::after{content:'Desliza para ver todos';position:absolute;left:50%;bottom:66px;z-index:2;pointer-events:none;white-space:nowrap;padding:9px 14px 9px 38px;border-radius:999px;background:#111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E") no-repeat 13px 50%/18px;color:#fff;font-size:12.5px;font-weight:500;box-shadow:0 6px 18px rgba(0,0,0,.18);transform:translateX(-50%);animation:as-desliza 1.8s cubic-bezier(.45,0,.55,1) infinite;transition:opacity .3s}
.as .as-m-pk.es-largo.ya-desliza::after{opacity:0;animation:none}
@keyframes as-desliza{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-14px)}}
@media (prefers-reduced-motion:reduce){.as .as-m-pk.es-largo::after{animation:none}}
/* 10/11/2026: «Trydan» va dentro del H1 (un solo H1: «Trydan El cargador…») como span con el aspecto del eyebrow.
   En bloque, con el interlineado del parrafo que era, y sin animacion propia: entra con el H1. */
.trydan-lp .trydan-h1 .trydan-eyebrow{display:block;line-height:1.5;text-wrap:wrap;animation:none}
@media (max-width:47.999rem){.trydan-lp .trydan-h1 .trydan-eyebrow{line-height:1.4}}