/* SERVICIO 01 · Comparador Antes / Después. Prefijo aislado `auto1-`. */
.service-large .auto1-slot{width:100%;min-height:0;aspect-ratio:1.81/1;display:block;margin:34px 0 0;padding:0;overflow:hidden;border:1px solid #dbe4f0;border-radius:34px;background:#f8fafc}.service-large .auto1-slot::before{display:none}

/* Botón del Servicio 01: cápsula blanca consistente con los controles
   visibles de los demás servicios. */
.service-large .service-info-button,
.service-large .service-details[open] .service-info-button{
  min-height:54px;
  padding-inline:26px;
  border:1px solid rgba(16,23,41,.1);
  background:#fff;
  color:#101729;
  box-shadow:0 14px 32px rgba(31,48,75,.12);
}
.service-large .service-info-button:hover{
  border-color:rgba(20,115,255,.25);
  background:#fff;
  box-shadow:0 18px 38px rgba(31,48,75,.17);
}
.auto1-compare{--auto1-ink:#101729;--auto1-muted:#526079;--auto1-red:#ff4038;--auto1-blue:#1473ff;width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr) 12.5% minmax(0,1fr);align-items:stretch;color:var(--auto1-ink);background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}.auto1-compare span{position:static;z-index:auto;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none}

/* Mitades roja y azul con cuadrícula técnica. */
.auto1-side{min-width:0;padding:0 4.1% 3%;overflow:hidden;border-radius:32px}

/* Fondos limpios: se retiró la cuadrícula para dar más protagonismo a
   las tarjetas, conservando solo un matiz que diferencia cada estado. */
.auto1-before{background:linear-gradient(135deg,rgba(255,64,56,.055),rgba(255,255,255,.3))}
.auto1-after{background:linear-gradient(225deg,rgba(20,115,255,.065),rgba(255,255,255,.3))}

/* Alineación del contenido explicativo del Servicio 01. */
.service-large>div:not(.auto1-slot){text-align:left}
.service-large>div:not(.auto1-slot) h3,
.service-large>div:not(.auto1-slot) p{margin-inline:0;text-align:left}
.auto1-heading{height:8.5%;text-align:center}.auto1-heading p{margin:1.3% 0 0;color:#343d52;font-size:clamp(10px,1vw,14px);font-weight:750}.auto1-label{display:inline-block;transform:translateY(-18%);padding:5px 22px;border-radius:999px;font-size:clamp(10px,.95vw,14px);font-weight:900;text-transform:uppercase}.auto1-label-danger{color:#dc0800;background:#ffe4e2}.auto1-label-success{color:var(--auto1-blue);background:#e8f1ff}

/* Estado manual: seis tarjetas en una matriz de 2 × 3. */
.auto1-manual-map{height:71%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:2.8%}.auto1-manual-card,.auto1-result,.auto1-dashboard,.auto1-google{min-width:0;border:1px solid rgba(255,64,56,.25);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 14px 34px rgba(31,48,75,.11)}.auto1-manual-card{padding:7%}.auto1-manual-card span{display:inline-block;margin-left:5%;vertical-align:middle}.auto1-manual-card strong{display:block;font-size:clamp(9px,1.05vw,15px);line-height:1.2}.auto1-manual-card small{display:block;max-width:175px;margin-top:14%;color:var(--auto1-muted);font-size:clamp(7px,.87vw,12px);line-height:1.65}.auto1-app{width:clamp(25px,2.35vw,34px);height:clamp(25px,2.35vw,34px);display:inline-grid;place-items:center;border-radius:10px;color:#fff;font-size:clamp(8px,.9vw,13px);font-style:normal;font-weight:900;vertical-align:middle}.auto1-mail,.auto1-document,.auto1-clock{background:var(--auto1-red)}.auto1-sheet{background:#179f56}.auto1-chat{border-radius:50%;background:#42bf69}.auto1-approval{background:#ff9708}

/* Núcleo Atlas y conectores horizontales. */
.auto1-core{position:relative;z-index:2;align-self:center;width:72%;aspect-ratio:.64/1;display:grid;place-content:center;gap:12px;margin:auto;border:1px solid #cfe0fa;border-radius:999px;text-align:center;background:linear-gradient(145deg,#fff,#edf5ff);box-shadow:0 18px 46px rgba(32,67,116,.17)}.auto1-core::before,.auto1-core::after{content:"";position:absolute;top:50%;width:42%;height:2px;background:var(--auto1-blue)}.auto1-core::before{right:100%}.auto1-core::after{left:100%}.auto1-core span{color:var(--auto1-blue);font-size:clamp(13px,1.35vw,19px);font-weight:900}.auto1-core strong{color:#1d2845;font-size:clamp(8px,.93vw,13px);letter-spacing:.12em;text-transform:uppercase}

/* Estado automatizado: resultados, dashboard y aplicaciones. */
.auto1-results{display:grid;grid-template-rows:repeat(4,9.8%) 36% 13%;gap:1.8%;height:91.5%}.auto1-result{display:flex;align-items:center;gap:2.5%;padding:2.2% 2.6%;border-color:rgba(20,115,255,.2)}.auto1-result i{width:clamp(34px,3.25vw,46px);aspect-ratio:1;display:grid;place-items:center;flex:none;border-radius:50%;color:#fff;background:linear-gradient(145deg,#2888ff,#0963ed);font-size:clamp(10px,1vw,14px);font-style:normal;font-weight:900;box-shadow:0 8px 18px rgba(20,115,255,.24)}.auto1-result span{flex:1}.auto1-result strong{display:block;font-size:clamp(8px,.92vw,13px)}.auto1-result small{display:block;margin-top:4px;color:var(--auto1-muted);font-size:clamp(6px,.76vw,11px)}.auto1-result b{color:var(--auto1-blue);font-size:clamp(8px,.9vw,13px);font-weight:900}

/* Dashboard con tres métricas y gráfica. */
.auto1-dashboard{padding:3%;border-color:rgba(20,115,255,.2)}.auto1-dashboard>header{display:flex;align-items:center;justify-content:space-between}.auto1-dashboard>header strong{font-size:clamp(10px,1.05vw,15px)}.auto1-dashboard>header span{padding:6px 14px;border:1px solid #dfe5ed;border-radius:9px;color:var(--auto1-muted);font-size:clamp(7px,.75vw,11px)}.auto1-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1.7%;margin-top:2.3%}.auto1-metrics div{min-width:0;padding:5.5%;border:1px solid #e4e8ee;border-radius:9px}.auto1-metrics small{display:block;color:var(--auto1-muted);font-size:clamp(6px,.72vw,10px)}.auto1-metrics strong{display:block;margin-top:7%;font-size:clamp(10px,1.15vw,16px)}.auto1-metrics em{display:block;margin-top:4%;color:#00a36a;font-size:clamp(6px,.72vw,10px);font-style:normal;font-weight:900}.auto1-dashboard svg{width:66%;height:29%;display:block;margin:2.3% 3% 0 auto;overflow:visible}.auto1-dashboard path{fill:none;stroke:var(--auto1-blue);stroke-width:2.5;stroke-linecap:round}.auto1-dashboard circle{fill:#fff;stroke:var(--auto1-blue);stroke-width:2.5}

/* Ecosistema Google inferior. */
.auto1-google{padding:2.5%;border-color:rgba(20,115,255,.18)}.auto1-google>strong{display:block;color:var(--auto1-muted);font-size:clamp(6px,.72vw,10px);letter-spacing:.12em;text-transform:uppercase}.auto1-google>div{display:flex;gap:1.5%;margin-top:2%}.auto1-google span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 5px;border:1px solid #e2e7ee;border-radius:999px;background:#fff;font-size:clamp(6px,.7vw,10px);font-weight:750}.auto1-google i{width:19px;height:19px;display:grid;place-items:center;border-radius:6px;color:#fff;font-size:8px;font-style:normal;font-weight:900}.auto1-gmail{background:linear-gradient(135deg,#4285f4,#ea4335 52%,#fbbc04)}.auto1-sheets{background:#34a853}.auto1-drive{background:linear-gradient(135deg,#1a73e8,#34a853 52%,#fbbc04)}.auto1-forms{background:#7248b9}.auto1-looker{background:#4285f4}

/* En escritorio se recupera la composición original del servicio:
   información a la izquierda y comparador visual a la derecha. */
@media (min-width:1180px){
  .service-large{
    min-height:760px;
    display:grid;
    grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr);
    grid-template-rows:auto 1fr auto;
    column-gap:38px;
    align-items:start;
  }
  .service-large .service-number{grid-column:1/-1}
  .service-large>.service-primary-copy{
    grid-column:1;
    grid-row:2/4;
    width:100%;
    height:660px;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
  .service-large>.service-primary-copy h3{
    width:100%;
    max-width:100%;
    margin:0;
    overflow-wrap:normal;
    word-break:normal;
    font-size:clamp(34px,2.7vw,42px);
    line-height:1.08;
    letter-spacing:0;
    text-align:left;
  }
  .service-large>.service-primary-copy h3 span{
    display:block;
    white-space:nowrap;
  }
  .service-large>.service-primary-copy p{
    max-width:390px;
    margin:42px 0 0;
    font-size:17px;
    text-align:left;
  }

  /* Los beneficios pertenecen al mismo bloque y ocupan su tercio inferior. */
  .service-large>.service-primary-copy .service-list{
    width:min(94%,390px);
    margin:88px 0 0 auto;
    text-align:left;
  }
  .service-large>.service-primary-copy .service-list li{padding-left:20px;text-align:left}
  .service-large>.service-primary-copy .service-list li::before{display:block}
  .service-large .auto1-slot{
    grid-column:2;
    grid-row:2/4;
    width:100%;
    height:660px;
    aspect-ratio:auto;
    align-self:stretch;
    margin:0;
  }
  .service-large .service-details{grid-column:1/-1;grid-row:4;margin-top:34px}

  /* El centro se estrecha para entregar más espacio útil a los cuadros. */
  .auto1-compare{grid-template-columns:minmax(0,1fr) 10% minmax(0,1fr)}
  .auto1-side{padding-inline:3.2%}
  .auto1-core{width:82%}
  .auto1-core strong{font-size:8px;letter-spacing:.04em;white-space:nowrap}
  .auto1-manual-card{padding:6%}
  .auto1-manual-card small{margin-top:10%;line-height:1.5}
}

/* En móvil las dos etapas se apilan para conservar legibilidad. */
@media (max-width:760px){.service-large .auto1-slot{aspect-ratio:auto;border-radius:20px}.auto1-compare{height:auto;grid-template-columns:1fr}.auto1-side{padding:18px}.auto1-heading{height:auto;margin-bottom:16px}.auto1-manual-map{height:auto;grid-template-rows:none;gap:12px}.auto1-manual-card{min-height:120px}.auto1-manual-card small{margin-top:10px}.auto1-core{width:82%;height:86px;aspect-ratio:auto;border-radius:24px;margin:18px auto}.auto1-core::before,.auto1-core::after{display:none}.auto1-results{height:auto;grid-template-rows:none;gap:10px}.auto1-result{min-height:68px}.auto1-dashboard{min-height:210px}.auto1-google{min-height:90px}.auto1-google>div{flex-wrap:wrap}}
@media (max-width:430px){.auto1-manual-map{grid-template-columns:1fr}}

/* ==================================================================
   NUEVO DISEÑO · PANEL "DESPUÉS"
   Adaptación del CSS entregado a las clases actuales. Todas las reglas
   quedan bajo `.auto1-after` para no modificar "Antes" ni el sitio.
   ================================================================== */
.auto1-after{
  --auto1-blueprint:#194d83;
  --auto1-blueprint-deep:#123b68;
  --auto1-paper-coral:#f36b4f;
  --auto1-paper-blue:#2f72d8;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#f7fbff;
  background:
    linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(135deg,rgba(255,255,255,.06),transparent 36%),
    linear-gradient(155deg,var(--auto1-blueprint),var(--auto1-blueprint-deep));
  background-size:24px 24px,24px 24px,auto,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -32px 80px rgba(0,0,0,.18);
}

/* Láminas coral y azul que aportan profundidad al fondo técnico. */
.auto1-after::before,.auto1-after::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:4px;
  box-shadow:0 22px 36px rgba(5,15,32,.28);
}
.auto1-after::before{
  width:46%;height:170px;top:78px;right:8%;
  background:linear-gradient(90deg,rgba(16,23,41,.32) 1px,transparent 1px),linear-gradient(180deg,rgba(16,23,41,.28) 1px,transparent 1px),var(--auto1-paper-coral);
  background-size:28px 28px,28px 28px,auto;
  transform:rotate(-1.5deg);
}
.auto1-after::after{
  width:32%;height:128px;top:54px;right:3%;
  background:linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.12) 1px,transparent 1px),var(--auto1-paper-blue);
  background-size:18px 18px,18px 18px,auto;
  transform:rotate(9deg);
}

/* Encabezado claro sobre el fondo oscuro. */
.auto1-after .auto1-label-success{position:relative;z-index:1;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16)}
.auto1-after .auto1-heading p{position:relative;z-index:1;transform:translateY(-.5cm);color:#080b12}
.auto1-after .auto1-results{position:relative;z-index:1}

/* Tarjetas de resultados en cristal azul. */
.auto1-after .auto1-result{
  border-color:rgba(255,255,255,.18);
  background:rgba(12,37,67,.72);
  box-shadow:0 16px 34px rgba(5,15,32,.2),inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
}
.auto1-after .auto1-result strong{color:#fff}
.auto1-after .auto1-result small{color:rgba(255,255,255,.68)}
.auto1-after .auto1-result span{min-width:0;padding-right:4px}
.auto1-after .auto1-result strong,.auto1-after .auto1-result small{overflow-wrap:normal;word-break:normal}
.auto1-after .auto1-result b{min-width:clamp(48px,5vw,72px);display:inline-flex;align-items:center;justify-content:center;flex:none;padding:5px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#fff;background:rgba(255,255,255,.13);font-size:clamp(7px,.72vw,10px);white-space:nowrap}
.auto1-after .auto1-result i{color:var(--auto1-blueprint-deep);background:linear-gradient(145deg,#fff,#cfe3ff);box-shadow:0 10px 22px rgba(4,17,38,.24)}

/* Dashboard oscuro con retícula y brillo coral. */
.auto1-after .auto1-dashboard{
  position:relative;
  overflow:hidden;
  border-color:rgba(255,255,255,.2);
  background:linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.055) 1px,transparent 1px),rgba(8,28,53,.82);
  background-size:18px 18px,18px 18px,auto;
  box-shadow:0 20px 42px rgba(5,15,32,.26);
}
.auto1-after .auto1-dashboard::before{content:"";position:absolute;width:128px;height:128px;right:-46px;top:-54px;border-radius:50%;background:rgba(243,107,79,.28)}
.auto1-after .auto1-dashboard>header{position:relative;z-index:1}
.auto1-after .auto1-dashboard>header strong{color:#fff}
.auto1-after .auto1-dashboard>header span{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.68);background:rgba(255,255,255,.08)}
.auto1-after .auto1-metrics{position:relative;z-index:1}
.auto1-after .auto1-metrics div{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.1)}
.auto1-after .auto1-metrics small{color:rgba(255,255,255,.62)}
.auto1-after .auto1-metrics strong{color:#fff}
.auto1-after .auto1-metrics em{color:#9be7ff}
.auto1-after .auto1-dashboard svg{position:relative;z-index:1}
.auto1-after .auto1-dashboard path{stroke:#9be7ff}
.auto1-after .auto1-dashboard circle{fill:var(--auto1-paper-coral);stroke:#fff}

/* Integraciones en una lámina azul ligeramente inclinada. */
.auto1-after .auto1-google{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(47,114,216,.88),rgba(18,59,104,.82));
  box-shadow:0 18px 40px rgba(5,15,32,.22);
  transform:rotate(-.4deg);
}
.auto1-after .auto1-google>strong{color:rgba(255,255,255,.72)}
.auto1-after .auto1-google span{border-color:rgba(255,255,255,.14);color:#fff;background:rgba(255,255,255,.14)}