/* Visibilidad en IA — componentes propios de esta página. Usa los colores, la tipografía y los componentes de diseno-web.min.css. */
.vis-page{--navy:#1d2254;--aqua:#51edc8;--aqua-ink:#0b8f73;--ink:#1d2254;--muted:#4d5870;--line:#dde4ee;--soft:#eafff9;--surface:#f8fafc;--warn:#f5b84b;--bad:#ff7a6b}

/* Hero */
.vis-hero{background:var(--navy);color:#fff}
.vis-hero-inner{display:grid;grid-template-columns:minmax(0,1fr);max-width:1100px;gap:clamp(36px,5vw,80px);align-items:center;padding-block:clamp(56px,7vw,96px)}
.vis-hero .web-kicker{color:var(--aqua);font-size:14px;font-weight:700;margin:0 0 20px}
.vis-hero h1{font-family:Helvetica,Arial,sans-serif;font-size:min(8.8vw,calc(17vw - 29.6px),56px);line-height:1.02;letter-spacing:-.012em;color:#fff;margin:0 0 26px;text-wrap:balance}
.vis-hero h1 span{color:var(--aqua)}
.vis-hero .web-lead{color:rgba(255,255,255,.85);font-size:clamp(19px,1.6vw,22px);line-height:1.5;max-width:680px;margin:0 0 34px}

/* Formulario del diagnóstico */
.vis-form{display:grid;gap:10px;max-width:620px}
.vis-form label{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--aqua)}
.vis-field{display:flex;gap:10px;flex-wrap:wrap}
.vis-field input{flex:1 1 260px;min-width:0;min-height:60px;padding:0 18px;border:2px solid #fff;border-radius:4px;background:#fff;color:var(--navy);font:17px Helvetica,Arial,sans-serif}
.vis-field input::placeholder{color:#8a94ab}
.vis-field input:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.vis-field .btn{min-height:60px;padding:0 26px;border:0;font:700 14px/1 Helvetica,Arial,sans-serif;letter-spacing:.06em;background:var(--aqua);color:var(--navy)}
.vis-hint{margin:2px 0 0;font-size:15px;color:rgba(255,255,255,.75)}
.vis-msg{margin:0;font-size:15px;color:#fff}
.vis-msg a{color:var(--aqua);font-weight:700}
.vis-light .vis-form label{color:var(--aqua-ink)}
.vis-light .vis-field input{border-color:var(--navy)}
.vis-light .vis-hint,.vis-light .vis-msg{color:var(--muted)}
.vis-light .vis-msg a{color:var(--navy)}

/* Tarjeta de ejemplo de resultado */
.vis-plate{background:#fff;color:var(--navy);border-radius:8px;padding:clamp(22px,2.4vw,30px);display:grid;gap:18px;box-shadow:0 24px 60px rgba(0,0,0,.25);min-width:0}
.vis-plate-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vis-plate-site{font-size:14px;color:var(--muted)}
.vis-plate-tag{font-size:11px;font-weight:700;letter-spacing:.1em;background:var(--soft);border:1.5px solid var(--navy);border-radius:999px;padding:5px 10px;white-space:nowrap}
.vis-score{display:flex;align-items:baseline;gap:10px}
.vis-score b{font-size:clamp(56px,6vw,76px);line-height:.9;letter-spacing:-.04em}
.vis-score span{font-size:16px;color:var(--muted)}
.vis-verdict{margin:6px 0 0;font-size:19px;font-weight:700}
.vis-meters{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vis-meter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:15px}
.vis-meter strong{font-weight:700}
.vis-meter small{grid-column:1/-1;color:var(--muted);font-size:13px;line-height:1.35}
.vis-bar{grid-column:1/-1;height:8px;border-radius:99px;background:#e7edf2;overflow:hidden}
.vis-bar i{display:block;height:100%;border-radius:99px}
.vis-plate-foot{margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ¿Qué le pasa a tu sitio? — problemas con respuesta desplegable */
.vis-directory{border-top:2px solid var(--navy)}
.vis-q{border-bottom:1px solid var(--line)}
.vis-q summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:20px;align-items:center;padding:22px 4px;cursor:pointer;color:var(--navy)}
.vis-q summary::-webkit-details-marker{display:none}
.vis-q summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.vis-problem{font-size:clamp(19px,1.8vw,24px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.vis-arrow{width:46px;height:46px;border-radius:50%;background:var(--aqua);color:var(--navy);display:grid;place-items:center;transition:background .2s,color .2s,transform .25s}
.vis-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vis-q summary:hover .vis-arrow{background:var(--navy);color:var(--aqua)}
.vis-q[open] .vis-arrow{transform:rotate(180deg);background:var(--navy);color:var(--aqua)}
.vis-answer{padding:0 70px 26px 4px;display:grid;gap:12px;max-width:860px}
.vis-answer p{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
.vis-answer .vis-solves{color:var(--navy);font-size:16px}
.vis-answer .vis-solves a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--aqua);padding-bottom:1px;margin-left:4px;white-space:nowrap}

/* Diagnóstico gratis y completo */
.vis-diag{background:var(--surface)}
.vis-diag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vis-diag-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(24px,2.6vw,34px);display:grid;gap:18px;align-content:start;min-width:0}
.vis-diag-card.is-full{background:var(--navy);color:#fff;border-color:var(--navy)}
.vis-diag-card h3{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.01em;color:inherit}
.vis-diag-card .vis-price{font-size:13px;font-weight:700;letter-spacing:.1em;color:#36d1ad;margin:0}
.vis-diag-card.is-full .vis-price{color:var(--aqua)}
.vis-checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vis-checks li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.vis-checks .service-glyph{width:44px;height:44px}
.vis-checks .service-glyph svg{width:24px;height:24px}
.vis-checks strong{display:block;font-size:17px;margin-bottom:2px}
.vis-checks p{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.vis-diag-card.is-full .vis-checks p{color:rgba(255,255,255,.8)}
.vis-diag-card.is-full .service-glyph{background:rgba(81,237,200,.1);border-color:var(--aqua);color:var(--aqua)}
.vis-diag-card .btn{justify-self:start}

/* Servicios y planes */
.vis-intro{margin:-14px 0 clamp(26px,3vw,40px);max-width:760px;color:var(--muted);font-size:18px;line-height:1.55}
.vis-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vis-chip{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--navy);background:var(--soft);border:1.5px solid var(--navy);border-radius:999px;padding:6px 12px;margin-bottom:16px}
.vis-cards .web-format-desc{margin:0 0 18px;color:var(--muted);font-size:16px;line-height:1.5}
.vis-note{margin:auto 0 0;padding-top:18px;font-size:14px;font-weight:700;color:#36d1ad}
.vis-plans .web-format.is-featured{background:var(--navy);border-color:var(--navy);color:#fff}
.vis-plans .web-format.is-featured h3{color:#fff}
.vis-plans .web-format.is-featured .web-format-desc{color:rgba(255,255,255,.8)}
.vis-plans .web-format.is-featured .web-format-list li{color:#fff}
.vis-plans .web-format.is-featured .web-format-list li::after{border-color:var(--navy)}
.vis-plans .web-format.is-featured .vis-chip{background:var(--aqua);border-color:var(--aqua)}
.vis-plan-cta{margin-top:22px;align-self:flex-start;font-size:14px;font-weight:700;letter-spacing:.06em;color:inherit;text-decoration:none;border-bottom:2px solid var(--aqua);padding-bottom:3px}
.vis-plans-note{margin:24px 0 0;max-width:780px;color:var(--muted);font-size:16px;line-height:1.55}
.vis-plans{background:var(--surface)}

@media(max-width:1000px){
  .vis-hero-inner{grid-template-columns:minmax(0,1fr)}
  .vis-plate{max-width:520px}
  .vis-cards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .vis-diag-grid{grid-template-columns:minmax(0,1fr)}
  .vis-q summary{grid-template-columns:minmax(0,1fr) 40px;padding:18px 2px;gap:14px}
  .vis-arrow{width:40px;height:40px}
  .vis-answer{padding:0 2px 22px}
  .vis-answer p{font-size:16px}
}
@media(max-width:520px){
  .vis-field .btn{flex:1 1 100%}
  .vis-diag-card .btn{justify-self:stretch}
}
@media(prefers-reduced-motion:reduce){.vis-arrow{transition:none}}

/* Resultado del diagnóstico dentro de esta página (estilos de assets/diagnostico.css) */
.vis-hero .dx-error{margin:4px 0 0}
.vis-page .dx-results-wrap{scroll-margin-top:90px}

/* En esta página el resultado muestra solo el puntaje por capa y el recuadro para contactarnos */
.vis-page .dx-priority,.vis-page .dx-layers{display:none!important}
.vis-page .dx-cta{margin-top:24px}

/* Cierre: palabra que va cambiando */
.vis-rotate{display:inline-block;transition:opacity .35s ease,transform .35s ease}
.vis-rotate.is-out{opacity:0;transform:translateY(.25em)}
.vis-page .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}
.vis-page .digital-final-copy h2 span[aria-hidden="true"]:not(.vis-rotate){color:#fff;display:inline}
.vis-page .digital-final-copy h2 .vis-rotate{display:block;white-space:nowrap}

/* Resultado: "Lo que encontramos" (hasta 3 problemas reales, sin la solución) */
.vis-page .vis-found{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px 40px}
.vis-page .vis-found h2{font-size:24px;line-height:1.2;color:var(--navy);margin:0 0 6px}
.vis-page .vis-found-lead{margin:0 0 10px;color:var(--muted);font-size:16px}
@media(max-width:760px){.vis-page .vis-found{padding:24px 20px}}

/* Hero: "¿Qué dice la IA de" fijo en blanco y la segunda línea cambiando en verde */
.vis-hero h1 .vis-h1-fixed{color:#fff}
.vis-hero h1 .vis-rotate{display:block;color:var(--aqua);white-space:nowrap}

/* Botón de cada servicio */
.vis-cards .vis-card-cta{margin-top:20px;align-self:flex-start;min-height:52px;padding:0 22px;font-size:13px;letter-spacing:.06em;text-decoration:none}
@media(max-width:1000px){.vis-cards .vis-card-cta{align-self:stretch}}