@font-face {
  font-family:"Outfit";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/fonts/outfit-latin.woff2") format("woff2");
}

.pi-storytelling-form-standalone {
  margin:0;
  background:#fff;
}

.pi-story-audit,
.pi-story-audit * {
  box-sizing:border-box;
}

.pi-story-audit {
  --pi-audit-live:var(--pi-brand-live-color,var(--pi-accent,#e3063b));
  --pi-audit-rule:rgba(0,0,0,.13);
  width:100%;
  padding:56px 20px;
  background:#fff;
  color:#111;
  font-family:"Outfit",Arial,Helvetica,sans-serif;
  font-size:16px;
  font-weight:300;
  line-height:1.5;
}

.pi-story-audit button,
.pi-story-audit input,
.pi-story-audit select,
.pi-story-audit textarea {
  font:inherit;
}

.pi-story-audit .pi-audit-wrap {
  width:100%;
  max-width:1380px;
  margin:0 auto;
}

.pi-story-audit.is-open {
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  padding-top:clamp(24px,3.4vh,40px);
  padding-bottom:clamp(24px,3.4vh,40px);
  display:flex;
  align-items:center;
}

.pi-story-audit.is-open .pi-audit-wrap { width:100%; }

.pi-story-audit .pi-audit-banner {
  display:grid;
  grid-template-columns:135px minmax(0,1fr) 330px;
  align-items:stretch;
  gap:34px;
  margin:60px 0;
  padding:40px 0;
  border-bottom:1px solid var(--pi-audit-rule);
}

.pi-story-audit .pi-audit-col-icon {
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-block:-40px;
  padding-block:40px;
  border-right:1px solid var(--pi-audit-rule);
}

.pi-story-audit .pi-audit-live-icon {
  display:block;
  flex:0 0 auto;
  width:100px;
  height:100px;
  background-color:var(--pi-audit-live);
  -webkit-mask:url("/img/icons/avion.svg") center / contain no-repeat;
  mask:url("/img/icons/avion.svg") center / contain no-repeat;
  transition:background-color .35s ease;
}

.pi-story-audit .pi-audit-col-copy h1,
.pi-story-audit .pi-audit-col-copy h2 {
  margin:0 0 7px;
  color:#111;
  font-size:31px;
  line-height:1.03;
  font-weight:700;
  letter-spacing:-.035em;
}

.pi-story-audit .pi-audit-col-copy p {
  max-width:760px;
  margin:0;
  color:#57524f;
  font-size:14px;
  line-height:1.5;
}

.pi-story-audit .pi-audit-col-copy p strong { color:#262220; }

.pi-story-audit .pi-audit-value-line {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  color:#77706b;
  font-size:11px;
  line-height:1.5;
}

.pi-story-audit .pi-audit-value-line strong {
  color:#373330;
  font-weight:700;
}

.pi-story-audit .pi-audit-value-price {
  color:var(--pi-audit-live)!important;
  font-weight:700!important;
}

.pi-story-audit .pi-audit-col-action {
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.pi-story-audit .pi-audit-btn {
  position:relative;
  isolation:isolate;
  width:305px;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  clip-path:none;
  background:#c7c7c2;
  color:#111;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

.pi-story-audit .pi-audit-btn::before {
  position:absolute;
  z-index:0;
  inset:1px;
  background:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%,15px 100%,0 calc(100% - 15px));
  content:"";
  transition:background-color .3s ease;
}

.pi-story-audit .pi-audit-btn::after {
  position:absolute;
  z-index:2;
  top:50%;
  right:58px;
  width:1px;
  height:30px;
  background:var(--pi-audit-live);
  content:"";
  transform:translateY(-50%);
}

.pi-story-audit .pi-audit-btn-copy {
  position:relative;
  z-index:1;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:0 1.65rem;
  text-align:left;
}

.pi-story-audit .pi-audit-btn-copy span {
  color:#111;
  font-size:11px;
  line-height:1.05;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.pi-story-audit .pi-audit-btn-arrow {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  flex:0 0 58px;
  width:58px;
  height:70px;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--pi-audit-live);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

.pi-story-audit .pi-audit-icon-open,
.pi-story-audit .pi-audit-icon-close {
  display:block;
  width:15px;
  height:15px;
  fill:currentColor;
}

.pi-story-audit .pi-audit-icon-close { display:none; }
.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-icon-open { display:none; }
.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-icon-close { display:block; }

.pi-story-audit .pi-audit-btn:hover,
.pi-story-audit .pi-audit-btn:focus-visible {
  transform:none;
}

.pi-story-audit .pi-audit-btn:hover::before,
.pi-story-audit .pi-audit-btn:focus-visible::before {
  background:#f7f7f4;
}

.pi-story-audit .pi-audit-btn:hover .pi-audit-btn-arrow,
.pi-story-audit .pi-audit-btn:focus-visible .pi-audit-btn-arrow {
  transform:translateX(3px);
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]:hover .pi-audit-btn-arrow,
.pi-story-audit .pi-audit-btn[aria-expanded="true"]:focus-visible .pi-audit-btn-arrow {
  transform:rotate(90deg);
}



/* Estado abierto: deja de ser CTA y pasa a ser control de interfaz. */
.pi-story-audit .pi-audit-btn[aria-expanded="true"] {
  background:#deded9;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]::before {
  background:#fff;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy span {
  color:#77726e;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]::after {
  background:var(--pi-audit-live);
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-arrow {
  color:var(--pi-audit-live);
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]:hover,
.pi-story-audit .pi-audit-btn[aria-expanded="true"]:focus-visible {
  background:#d4d4cf;
  transform:none;
}

.pi-story-audit .pi-audit-panel {
  margin-top:0;
  padding-top:0;
  border:0;
}

.pi-story-audit .pi-audit-panel-inner {
  display:grid;
  grid-template-columns:minmax(280px,370px) minmax(0,1fr);
  gap:76px;
  align-items:start;
}

.pi-story-audit .pi-audit-form-kicker {
  display:block;
  margin-bottom:18px;
  color:#6d6560;
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.pi-story-audit .pi-audit-panel-intro h2,
.pi-story-audit .pi-audit-panel-intro h3 {
  max-width:350px;
  margin:0 0 12px;
  color:#111;
  font-size:43px;
  line-height:1.02;
  font-weight:500;
  letter-spacing:-.04em;
}

.pi-story-audit .pi-audit-panel-intro p {
  max-width:370px;
  margin:0 0 20px;
  color:#55504c;
  font-size:14px;
  line-height:1.55;
}

.pi-story-audit .pi-audit-panel-intro small { color:#5f5b57; font-size:11px; font-weight:600; }

.pi-story-audit .pi-audit-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 30px;
}

.pi-story-audit .pi-field { display:flex; flex-direction:column; }
.pi-story-audit .pi-field-full { grid-column:1/-1; }

.pi-story-audit .pi-field label {
  margin:0;
  color:#554f4b;
  font-size:9px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.pi-story-audit .pi-field label span { color:#ed5a35; }

.pi-story-audit .pi-field label.pi-required-label::after {
  color:#ed5a35;
  content:" *";
}

.pi-story-audit .pi-field input,
.pi-story-audit .pi-field select,
.pi-story-audit .pi-field textarea {
  width:100%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.20);
  border-radius:0;
  background:transparent;
  color:#111;
  outline:none;
  box-shadow:none;
  font-size:14px;
  line-height:1.3;
  transition:border-color .2s ease;
}

.pi-story-audit .pi-field input { height:31px; padding:3px 0 5px; }

.pi-story-audit .pi-field select {
  height:34px;
  padding:3px 28px 5px 0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);
  background-position:calc(100% - 8px) 50%,calc(100% - 3px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.pi-story-audit .pi-field textarea { padding:5px 0 6px; }
.pi-story-audit .pi-field input:focus,
.pi-story-audit .pi-field select:focus,
.pi-story-audit .pi-field textarea:focus { border-bottom-color:#111; }

.pi-story-audit .pi-field-label-row {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:12px;
}

.pi-story-audit .pi-field-help {
  position:relative;
  display:grid;
  place-items:center;
  width:14px;
  height:14px;
  padding:0;
  border:1px solid rgba(0,0,0,.26);
  border-radius:50%;
  background:transparent;
  color:#77706b;
  font-size:9px;
  line-height:1;
  cursor:help;
}

.pi-story-audit .pi-field-tooltip {
  position:absolute;
  z-index:20;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  width:max-content;
  max-width:220px;
  padding:7px 9px;
  background:#111;
  color:#fff;
  font-size:10px;
  line-height:1.3;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}

.pi-story-audit .pi-field-help:hover .pi-field-tooltip,
.pi-story-audit .pi-field-help:focus-visible .pi-field-tooltip {
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.pi-story-audit .pi-field-message textarea {
  min-height:46px;
  height:46px;
  max-height:200px;
  resize:vertical;
}

.pi-story-audit .pi-audit-form-footer {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
  align-items:start;
  margin-top:18px;
}

.pi-story-audit .pi-audit-consent {
  min-width:0;
  margin:0;
}

.pi-story-audit .pi-audit-check {
  display:flex;
  align-items:flex-start;
  gap:11px;
  max-width:none;
  color:#625c57;
  font-size:11px;
  line-height:1.45;
  cursor:pointer;
}

.pi-story-audit .pi-audit-check input {
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin:0;
  accent-color:#111;
  cursor:pointer;
}

.pi-story-audit .pi-audit-check a { color:#111; text-decoration:underline; text-underline-offset:3px; }
.pi-story-audit .pi-audit-actions {
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  margin:0;
}

/* ==========================================================
   BOTÓN DE ENVÍO · SEÑALÉTICA PUBLIMPACTO
   ----------------------------------------------------------
   Misma lógica visual que el CTA ¿HABLAMOS? del footer:
   - sin masa de color;
   - perímetro gris fino;
   - texto negro;
   - divisor + flecha en color vivo;
   - chaflán inferior izquierdo;
   - hover basado en línea y movimiento, no en relleno.
   ========================================================== */

.pi-story-audit .pi-submit-btn {
  position:relative;
  isolation:isolate;

  width:305px;
  min-height:64px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;

  margin:0;
  padding:0;

  overflow:hidden;
  border:0;
  border-radius:0;
  clip-path:none;

  /* El fondo exterior actúa únicamente como línea perimetral. */
  background:rgba(17,17,17,.18);
  color:#111;
  cursor:pointer;
  box-shadow:none;

  transition:
    background-color .25s ease,
    transform .3s cubic-bezier(.16,1,.3,1);
}

.pi-story-audit .pi-submit-btn::before {
  position:absolute;
  z-index:0;
  inset:1px;

  background:#fff;
  clip-path:polygon(
    0 0,
    100% 0,
    100% 100%,
    15px 100%,
    0 calc(100% - 15px)
  );

  content:"";
  pointer-events:none;
}

.pi-story-audit .pi-submit-btn::after {
  position:absolute;
  z-index:2;
  top:50%;
  right:58px;

  width:1px;
  height:28px;

  background:var(--pi-audit-live);
  content:"";
  transform:translateY(-50%);
  pointer-events:none;
}

.pi-story-audit .pi-submit-copy {
  position:relative;
  z-index:1;
  flex:1 1 auto;

  padding:0 1.65rem;

  color:#111;
  font-size:11px;
  line-height:1.22;
  font-weight:700;
  letter-spacing:.15em;
  text-align:left;
  text-transform:uppercase;
}

.pi-story-audit .pi-submit-arrow {
  position:relative;
  z-index:1;

  display:grid;
  place-items:center;

  flex:0 0 58px;
  width:58px;
  height:62px;

  margin:0;
  padding:0;

  border:0;
  border-radius:0;
  background:transparent;

  color:var(--pi-audit-live);

  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

.pi-story-audit .pi-submit-arrow svg {
  display:block;
  width:22px;
  height:22px;
  fill:currentColor;
}

.pi-story-audit .pi-submit-arrow svg path {
  fill:currentColor;
}

.pi-story-audit .pi-submit-btn:hover,
.pi-story-audit .pi-submit-btn:focus-visible {
  background:rgba(17,17,17,.30);
  transform:translateY(-2px);
}

.pi-story-audit .pi-submit-btn:focus-visible {
  outline:2px solid var(--pi-audit-live);
  outline-offset:3px;
}

.pi-story-audit .pi-submit-btn:hover .pi-submit-arrow,
.pi-story-audit .pi-submit-btn:focus-visible .pi-submit-arrow {
  transform:translateX(3px);
}

.pi-story-audit .pi-audit-hp {
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

.pi-story-audit .pi-audit-status {
  min-height:18px;
  margin-top:14px;
  color:#625c57;
  font-size:11px;
  line-height:1.45;
}


.pi-story-audit .pi-audit-status:empty {
  min-height:0;
  margin-top:0;
}

.pi-story-audit .pi-audit-status.is-error { color:#a32626; }
.pi-story-audit .pi-audit-status.is-ok { color:#236a37; }

.pi-story-audit .pi-audit-panel-inner[hidden],
.pi-story-audit .pi-audit-success[hidden],
.pi-story-audit .pi-audit-panel.is-sent .pi-audit-panel-inner { display:none!important; }

.pi-story-audit .pi-submit-btn[disabled] {
  cursor:wait;
  opacity:.72;
  transform:none!important;
}

.pi-story-audit .pi-audit-success {
  max-width:920px;
  margin:clamp(48px,6vh,72px) auto 0;
  padding:clamp(34px,4.5vw,58px) 0;
  border-bottom:1px solid rgba(0,0,0,.13);
  text-align:left;
  outline:none;
}

.pi-story-audit .pi-audit-success__kicker {
  display:block;
  margin-bottom:16px;
  color:var(--pi-audit-live);
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.pi-story-audit .pi-audit-success p {
  max-width:720px;
  margin:0;
  color:#55504c;
  font-size:15px;
  line-height:1.7;
}

.pi-story-audit .pi-audit-success__lead {
  max-width:760px;
  color:#111;
  font-size:clamp(22px,2vw,27px);
  line-height:1.18;
  font-weight:500;
  letter-spacing:-.025em;
}

.pi-story-audit .pi-audit-success__lead strong {
  font-weight:650;
}

.pi-story-audit .pi-audit-success p + p { margin-top:12px; }
.pi-story-audit .pi-audit-success__mail { font-weight:600; color:#2f2b28!important; }
.pi-story-audit .pi-audit-success__mail strong { color:#111; }
.pi-story-audit .pi-audit-success__note { max-width:640px!important; font-size:12px!important; line-height:1.55!important; color:#8a837e!important; }

.pi-story-audit .pi-audit-success__meta {
  margin-top:26px;
  color:#77706b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

@media (min-width:900px) and (max-height:850px) {
  .pi-story-audit.is-open { padding-top:18px; padding-bottom:18px; }
  .pi-story-audit .pi-audit-banner { padding:30px 0; }
  .pi-story-audit .pi-audit-live-icon { width:88px; height:88px; }
  .pi-story-audit .pi-audit-panel { margin-top:0; }
  .pi-story-audit .pi-audit-panel-intro h2,
.pi-story-audit .pi-audit-panel-intro h3 { font-size:38px; }
  .pi-story-audit .pi-audit-panel-intro p { margin-bottom:15px; }
  .pi-story-audit .pi-audit-grid { gap:11px 30px; }
  .pi-story-audit .pi-audit-form-footer { margin-top:16px; }
  .pi-story-audit .pi-audit-consent { margin:0; }
  .pi-story-audit .pi-audit-actions { margin:0; }
}

@media (max-width:1100px) {
  .pi-story-audit .pi-audit-banner { grid-template-columns:90px 1fr 300px; gap:25px; }
  .pi-story-audit .pi-audit-live-icon { width:88px; height:88px; }
  .pi-story-audit .pi-audit-panel-inner { grid-template-columns:1fr; gap:34px; }
  .pi-story-audit.is-open { display:block; min-height:auto; }
}

@media (max-width:767px) {
  .pi-story-audit,
  .pi-story-audit.is-open { padding:38px 16px; }
  .pi-story-audit .pi-audit-banner { grid-template-columns:62px minmax(0,1fr); gap:15px; padding:25px 0; }
  .pi-story-audit .pi-audit-col-icon { align-self:start; }
  .pi-story-audit .pi-audit-live-icon { width:62px; height:62px; }
  .pi-story-audit .pi-audit-col-copy h1,
.pi-story-audit .pi-audit-col-copy h2 { font-size:23px; }
  .pi-story-audit .pi-audit-col-copy p { font-size:13px; }
  .pi-story-audit .pi-audit-value-line { font-size:10px; }
  .pi-story-audit .pi-audit-col-action { grid-column:1/-1; justify-content:flex-start; padding-top:5px; }
  .pi-story-audit .pi-audit-btn { width:100%; max-width:305px; }
  .pi-story-audit .pi-audit-panel { margin-top:42px; }
  .pi-story-audit .pi-audit-panel-inner { gap:30px; }
  .pi-story-audit .pi-audit-panel-intro h2,
.pi-story-audit .pi-audit-panel-intro h3 { font-size:34px; }
  .pi-story-audit .pi-audit-panel-intro p { font-size:14px; }
  .pi-story-audit .pi-audit-grid { grid-template-columns:1fr; gap:18px; }
  .pi-story-audit .pi-field-full { grid-column:auto; }
  .pi-story-audit .pi-field input,
  .pi-story-audit .pi-field select,
  .pi-story-audit .pi-field textarea { font-size:16px; }
  .pi-story-audit .pi-audit-check { font-size:11px; }
  .pi-story-audit .pi-audit-actions { margin-top:32px; }
  .pi-story-audit .pi-submit-btn { width:100%; max-width:305px; }
  .pi-story-audit .pi-audit-success { margin-top:42px; padding:30px 0; }
  .pi-story-audit .pi-audit-success h2,
.pi-story-audit .pi-audit-success h3 { font-size:38px; }
  .pi-story-audit .pi-audit-success p { font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .pi-story-audit .pi-audit-live-icon,
  .pi-story-audit .pi-audit-btn,
  .pi-story-audit .pi-audit-btn-arrow,
  .pi-story-audit .pi-submit-btn,
  .pi-story-audit .pi-submit-arrow,
  .pi-story-audit .pi-field-tooltip { transition:none; }
}


/* ==========================================================
   INTEGRACIÓN · STORYTELLING · SECCIÓN 06
   ========================================================== */
.pi-service-experience-story .pi-story-audit-host {
  position:relative;
  width:100%;
  min-height:0;
  margin:0;
  padding:0;
  overflow:visible;
  background:#fff;
  color:#111;
  isolation:isolate;
  scroll-margin-top:0;
}


/* ==========================================================
   LOTE 64 · CERRAR FORMULARIO · CONTROL DESNUDO
   ----------------------------------------------------------
   Estado abierto:
   - sin borde exterior;
   - sin caja;
   - sin esquina recortada;
   - solo texto + divisor vivo + X viva.
   ========================================================== */

.pi-story-audit .pi-audit-btn[aria-expanded="true"] {
  width:auto;
  min-width:250px;
  min-height:64px;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent !important;
  clip-path:none !important;
  transform:none !important;
  box-shadow:none !important;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]::before {
  content:none !important;
  display:none !important;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]::after {
  top:50%;
  right:58px;
  width:1px;
  height:30px;
  background:var(--pi-audit-live);
  transform:translateY(-50%);
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy {
  padding-left:0;
  padding-right:1.65rem;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy span {
  color:#74706c;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-arrow {
  color:var(--pi-audit-live);
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]:hover,
.pi-story-audit .pi-audit-btn[aria-expanded="true"]:focus-visible {
  background:transparent !important;
  transform:none !important;
}


/* ==========================================================
   LOTE 65 · FORMULARIO ABIERTO · SOLO DIVISOR + X
   ----------------------------------------------------------
   Se mantiene intacta el área activa del control para no
   alterar la geometría ni el estado cerrado.
   En estado abierto desaparece visualmente el copy
   "Cerrar formulario"; permanecen únicamente:
   - divisor en color vivo;
   - X en color vivo.
   ========================================================== */

.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy {
  opacity:0;
  pointer-events:none;
}



/* ==========================================================
   LOTE 66 · CABECERA CTA · ZONA COMPLETA ACTIVA
   ========================================================== */

.pi-story-audit:not(.is-open) .pi-audit-banner {
  cursor:pointer;
}

.pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn {
  background:var(--pi-audit-live);
}

.pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn::before {
  background:#fff;
}

.pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn-arrow {
  transform:translateX(3px);
}

.pi-story-audit.is-open .pi-audit-banner {
  cursor:default;
}

.pi-story-audit.is-open .pi-audit-btn {
  cursor:pointer;
}


/* ==========================================================
   LOTE 70 · TITULAR IZQUIERDO · TRES LÍNEAS REALES
   ----------------------------------------------------------
   El problema no estaba en los <br>, sino en el ancho máximo
   de la primera columna (370px / h3 350px), que obligaba al
   navegador a volver a partir cada línea.
   En escritorio ampliamos únicamente esa columna y reducimos
   el gap, preservando el cuerpo del formulario.
   ========================================================== */

@media (min-width:1101px) {
  .pi-story-audit .pi-audit-panel-inner {
    grid-template-columns:minmax(460px,480px) minmax(0,1fr);
    gap:52px;
  }

  .pi-story-audit .pi-audit-panel-intro h2,
  .pi-story-audit .pi-audit-panel-intro h3 {
    max-width:480px;
    white-space:nowrap;
  }
}


/* ==========================================================
   LOTE 72 · FORMULARIO · JERARQUÍA NARRATIVA
   ----------------------------------------------------------
   PROMESA arriba / PREGUNTA + MECÁNICA abajo.
   El banner pasa a contener el mensaje comercial principal.
   El bloque abierto baja un nivel de jerarquía y explica
   cómo empieza la intervención.
   ========================================================== */

/* Mensaje principal del banner: mayor peso y dos líneas reales. */
.pi-story-audit .pi-audit-col-copy h1,
.pi-story-audit .pi-audit-col-copy h2 {
  max-width:900px;
  margin:0 0 10px;
  font-size:clamp(36px,2.35vw,42px);
  line-height:1.01;
  font-weight:650;
  letter-spacing:-.045em;
}

/* Explicación superior algo más amplia para acompañar la promesa. */
.pi-story-audit .pi-audit-col-copy p {
  max-width:820px;
  font-size:14px;
  line-height:1.52;
}

/* El bloque abierto ya no compite con el banner. */
.pi-story-audit .pi-audit-panel-intro h2,
.pi-story-audit .pi-audit-panel-intro h3 {
  max-width:455px;
  margin:0 0 14px;
  font-size:34px;
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.035em;
  white-space:normal;
}

.pi-story-audit .pi-audit-panel-intro p {
  max-width:450px;
  margin:0 0 18px;
}

/* Neutraliza el nowrap del ajuste anterior en escritorio. */
@media (min-width:1101px) {
  .pi-story-audit .pi-audit-panel-intro h2,
  .pi-story-audit .pi-audit-panel-intro h3 {
    max-width:455px;
    white-space:normal;
  }
}

/* En portátiles bajos conserva claramente la jerarquía superior > inferior. */
@media (min-width:900px) and (max-height:850px) {
  .pi-story-audit .pi-audit-col-copy h1,
  .pi-story-audit .pi-audit-col-copy h2 {
    font-size:36px;
  }

  .pi-story-audit .pi-audit-panel-intro h2,
  .pi-story-audit .pi-audit-panel-intro h3 {
    font-size:31px;
  }
}


/* ==========================================================
   LOTE 73 · FORMULARIO ABIERTO · COLUMNA IZQUIERDA RESTAURADA
   ----------------------------------------------------------
   Recuperamos la proporción anterior del bloque abierto:
   - columna editorial izquierda más estrecha;
   - mayor separación respecto al formulario;
   - H3 y párrafo vuelven a su ancho editorial original.
   Se mantiene la nueva jerarquía: banner > bloque abierto.
   ========================================================== */

@media (min-width:1101px) {
  .pi-story-audit .pi-audit-panel-inner {
    grid-template-columns:minmax(280px,370px) minmax(0,1fr);
    gap:76px;
  }

  .pi-story-audit .pi-audit-panel-intro h2,
  .pi-story-audit .pi-audit-panel-intro h3 {
    max-width:350px;
    white-space:normal;
  }

  .pi-story-audit .pi-audit-panel-intro p {
    max-width:370px;
  }
}


/* ==========================================================
   LOTE 74 · BANNER CERRADO · CTA EDITORIAL + MICROGESTO
   ----------------------------------------------------------
   Dirección visual:
   - desaparece por completo la caja del CTA cerrado;
   - texto + divisor vertical + flecha forman la acción;
   - divisor vertical con una altura equivalente al avión;
   - flecha mayor;
   - bloque central con ancho controlado y más aire respecto
     a la línea del icono;
   - hover de toda la franja:
       · flecha avanza a la derecha;
       · avión ejecuta SOLO el primer microgesto de salida
         (ligera reducción anclada arriba/derecha);
   - sin animación larga del avión.
   El estado ABIERTO permanece como divisor + X.
   ========================================================== */

@media (min-width:1101px) {

  .pi-story-audit .pi-audit-banner {
    grid-template-columns:135px minmax(0,780px) 300px;
    column-gap:42px;
    justify-content:space-between;
  }

  .pi-story-audit .pi-audit-col-copy {
    width:100%;
    max-width:780px;
    padding-left:18px;
  }

  .pi-story-audit .pi-audit-col-action {
    justify-content:flex-end;
  }
}

/* ----------------------------------------------------------
   CTA CERRADO · SIN CAJA
   ---------------------------------------------------------- */

.pi-story-audit:not(.is-open) .pi-audit-btn {
  width:300px;
  min-height:100px;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent !important;
  color:#111;
  clip-path:none !important;
  box-shadow:none !important;
  transform:none !important;
}

.pi-story-audit:not(.is-open) .pi-audit-btn::before {
  content:none !important;
  display:none !important;
}

.pi-story-audit:not(.is-open) .pi-audit-btn::after {
  position:absolute;
  z-index:2;
  top:50%;
  right:58px;
  width:1px;
  height:100px;
  background:var(--pi-audit-live);
  content:"";
  transform:translateY(-50%);
}

.pi-story-audit:not(.is-open) .pi-audit-btn-copy {
  padding:0 30px 0 0;
}

.pi-story-audit:not(.is-open) .pi-audit-btn-copy span {
  color:#111;
  font-size:11px;
  line-height:1.08;
  font-weight:700;
  letter-spacing:.15em;
}

.pi-story-audit:not(.is-open) .pi-audit-btn-arrow {
  flex:0 0 58px;
  width:58px;
  height:100px;
  color:var(--pi-audit-live);
  transform:none;
}

.pi-story-audit:not(.is-open) .pi-audit-icon-open {
  width:23px;
  height:23px;
}

/* El hover de toda la franja solo comunica "avanza". */
.pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn {
  background:transparent !important;
}

.pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn-arrow {
  transform:translateX(8px);
}

/* ----------------------------------------------------------
   AVIÓN · PRIMER MICROGESTO DEL 01
   ---------------------------------------------------------- */

.pi-story-audit:not(.is-open) .pi-audit-live-icon {
  -webkit-mask-position:right top;
  mask-position:right top;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  transform:none;
  will-change:-webkit-mask-size,mask-size;
}

@keyframes pi-story-audit-plane-first-step {
  0% {
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
  50% {
    -webkit-mask-size:94% 94%;
    mask-size:94% 94%;
  }
  100% {
    -webkit-mask-size:88% 88%;
    mask-size:88% 88%;
  }
}

@media (hover:hover) and (pointer:fine) {
  .pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-live-icon {
    animation:
      pi-story-audit-plane-first-step
      320ms
      steps(2,end)
      1
      forwards;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-live-icon {
    animation:none !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
  }

  .pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn-arrow {
    transform:none !important;
  }
}

/* ==========================================================
   LOTE 79 · BANNER CERRADO · RETÍCULA ESTRUCTURAL
   ----------------------------------------------------------
   Arquitectura desktop:
   [ ICONO ] [ MENSAJE PRINCIPAL ] [ TEXTO VERTICAL | FLECHA ]

   Principio:
   - la altura real la manda el contenido principal;
   - las demás celdas se estiran a ESA MISMA altura;
   - la línea NO tiene height manual: es el border-left
     de la celda de la flecha y ocupa el 100% del sistema;
   - el CTA no tiene padding vertical ni caja;
   - el texto vertical vive en su propia celda y no se recorta;
   - el aire exterior sigue perteneciendo al banner (40px).
   ========================================================== */

@media (min-width:1101px) {
  .pi-story-audit .pi-audit-banner {
    grid-template-columns:135px minmax(0,820px) 150px;
    column-gap:48px;
    align-items:stretch;
    justify-content:space-between;
  }

  .pi-story-audit .pi-audit-col-copy {
    width:100%;
    max-width:820px;
    min-width:0;
    align-self:stretch;
    padding-left:28px;
  }

  .pi-story-audit .pi-audit-col-action {
    width:150px;
    min-width:150px;
    align-self:stretch;
    display:flex;
    align-items:stretch;
    justify-content:stretch;
  }
}

/* ----------------------------------------------------------
   ESTADO CERRADO · UNA MISMA ALTURA PARA TODO EL CTA
   ---------------------------------------------------------- */

.pi-story-audit:not(.is-open) .pi-audit-btn {
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,88px) 62px;
  align-items:stretch;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent !important;
  color:#111;
  clip-path:none !important;
  box-shadow:none !important;
  transform:none !important;
}

.pi-story-audit:not(.is-open) .pi-audit-btn::before,
.pi-story-audit:not(.is-open) .pi-audit-btn::after {
  content:none !important;
  display:none !important;
}

/* Texto vertical:
   la celda ocupa exactamente la altura de la fila.
   El texto se centra y queda próximo a la línea. */
.pi-story-audit:not(.is-open) .pi-audit-btn-copy {
  position:static;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center end;
  margin:0;
  padding:0 10px 0 0;
  color:#111;
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  white-space:nowrap;
  transform:rotate(180deg);
  transform-origin:center;
  opacity:1;
  pointer-events:none;
}

/* La línea arquitectónica es el borde de la celda de flecha:
   por definición ocupa EXACTAMENTE la misma altura que la fila. */
.pi-story-audit:not(.is-open) .pi-audit-btn-arrow {
  position:static;
  width:auto;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border-left:2px solid var(--pi-audit-live);
  background:transparent;
  color:var(--pi-audit-live);
  transform:none;
  transition:transform .30s cubic-bezier(.16,1,.3,1);
}

.pi-story-audit:not(.is-open) .pi-audit-icon-open {
  width:29px;
  height:29px;
}

/* Toda la franja es el área de acción.
   La flecha es la señal principal de avance. */
.pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn {
  background:transparent !important;
}

.pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn-arrow {
  transform:translateX(8px);
}

/* Avión: solo primer gesto de salida; nada de secuencia larga. */
.pi-story-audit:not(.is-open) .pi-audit-live-icon {
  -webkit-mask-position:right top;
  mask-position:right top;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  transform:none;
  will-change:-webkit-mask-size,mask-size;
}

@keyframes pi-story-audit-plane-structural-click {
  0% {
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
  50% {
    -webkit-mask-size:95% 95%;
    mask-size:95% 95%;
  }
  100% {
    -webkit-mask-size:90% 90%;
    mask-size:90% 90%;
  }
}

@media (hover:hover) and (pointer:fine) {
  .pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-live-icon {
    animation:
      pi-story-audit-plane-structural-click
      280ms
      steps(2,end)
      1
      forwards;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-live-icon {
    animation:none !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
  }

  .pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn-arrow {
    transform:none !important;
  }
}


/* ==========================================================
   LOTE 80 · CTA VERTICAL · DOS LÍNEAS REALES
   ----------------------------------------------------------
   Corrección de composición:
   - "QUIERO MI ESTRATEGIA" = primera línea vertical;
   - "DE STORYTELLING" = segunda línea vertical;
   - la altura deja de crecer como una única frase continua;
   - se conserva la retícula estructural del lote 79.
   ========================================================== */

.pi-story-audit:not(.is-open) .pi-audit-btn-copy {
  position:static;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin:0;
  padding:0 9px 0 0;
  color:#111;
  opacity:1;
  pointer-events:none;
  transform:none;
  writing-mode:horizontal-tb;
  white-space:normal;
}

.pi-story-audit:not(.is-open) .pi-audit-btn-copy > span {
  display:block;
  margin:0;
  padding:0;
  color:#111;
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  white-space:nowrap;
  transform:rotate(180deg);
  transform-origin:center;
}


/* ==========================================================
   LOTE 81 · ESTADO ABIERTO · MISMA RETÍCULA QUE CERRADO
   ----------------------------------------------------------
   Criterio:
   - cerrado y abierto comparten EXACTAMENTE la misma caja;
   - misma anchura, misma altura y mismas dos celdas;
   - al abrir desaparece el texto vertical;
   - la segunda celda mantiene la línea estructural, ahora 1px;
   - la flecha se sustituye por la X;
   - la X queda centrada en la misma celda;
   - no hay saltos de composición entre estados.
   ========================================================== */

.pi-story-audit.is-open .pi-audit-col-action {
  width:150px;
  min-width:150px;
  align-self:stretch;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"] {
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,88px) 62px;
  align-items:stretch;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent !important;
  color:var(--pi-audit-live);
  clip-path:none !important;
  box-shadow:none !important;
  transform:none !important;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]::before,
.pi-story-audit .pi-audit-btn[aria-expanded="true"]::after {
  content:none !important;
  display:none !important;
}

/* Primera celda vacía: conserva la arquitectura, no el mensaje. */
.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy {
  position:static;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  opacity:0;
  pointer-events:none;
  transform:none;
}

/* Segunda celda:
   misma posición que la flecha del estado cerrado,
   pero con línea de 1px y X centrada. */
.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-arrow {
  position:static;
  width:auto;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border-left:1px solid var(--pi-audit-live);
  background:transparent;
  color:var(--pi-audit-live);
  transform:none !important;
  transition:none;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-icon-close {
  display:block;
  width:13px;
  height:13px;
  fill:currentColor;
}

.pi-story-audit .pi-audit-btn[aria-expanded="true"]:hover,
.pi-story-audit .pi-audit-btn[aria-expanded="true"]:focus-visible {
  background:transparent !important;
  transform:none !important;
}


/* ==========================================================
   LOTE 82 · LÍNEA 1PX + HOVER REARMABLE
   ----------------------------------------------------------
   - Línea cerrada: 1px.
   - Línea abierta: ya estaba en 1px y se mantiene.
   - Se elimina la dependencia de keyframes "forwards" del avión.
   - El microgesto pasa a transición de mask-size anclada right/top.
   - Al abrir/cerrar el formulario el hover queda siempre disponible
     de nuevo sin necesidad de recargar la página.
   ========================================================== */

/* Línea estructural cerrada: 1px, mismo grosor visual que abierta. */
.pi-story-audit:not(.is-open) .pi-audit-btn-arrow {
  border-left:1px solid var(--pi-audit-live);
}

/* Estado base del avión: limpio y rearmable. */
.pi-story-audit .pi-audit-live-icon {
  -webkit-mask-position:right top;
  mask-position:right top;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  animation:none !important;
  transition:
    background-color .35s ease,
    -webkit-mask-size .28s steps(2,end),
    mask-size .28s steps(2,end);
}

/* Hover cerrado: un único microgesto hacia su punto de fuga.
   Al salir vuelve a 100%; al volver a entrar se ejecuta otra vez. */
@media (hover:hover) and (pointer:fine) {
  .pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-live-icon {
    animation:none !important;
    -webkit-mask-size:90% 90%;
    mask-size:90% 90%;
  }
}

/* Estado abierto: avión inmóvil. */
.pi-story-audit.is-open .pi-audit-live-icon {
  animation:none !important;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

/* Flecha: siempre vuelve a su origen cuando deja de estar en hover. */
.pi-story-audit:not(.is-open) .pi-audit-btn-arrow {
  transform:none;
  transition:transform .30s cubic-bezier(.16,1,.3,1);
}

.pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn-arrow {
  transform:translateX(8px);
}

@media (prefers-reduced-motion:reduce) {
  .pi-story-audit .pi-audit-live-icon {
    transition:background-color .35s ease !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
  }

  .pi-story-audit:not(.is-open) .pi-audit-banner:hover .pi-audit-btn-arrow {
    transform:none !important;
  }
}


/* ==========================================================
   LOTE 83 · ESTADO ABIERTO · GEOMETRÍA INMUTABLE
   ----------------------------------------------------------
   El texto vertical NO se elimina al abrir:
   permanece en DOM y conserva exactamente su huella geométrica.
   Solo se oculta visualmente.

   Resultado:
   - la barra no cambia de posición;
   - la celda derecha no cambia de ancho;
   - la altura del banner no colapsa;
   - el H2 principal no sube/baja ni se desplaza;
   - cerrado y abierto comparten la misma composición.
   ========================================================== */

/* En abierto conservamos exactamente la misma estructura interna
   que en cerrado para la primera celda del CTA. */
.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy {
  position:static;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin:0;
  padding:0 9px 0 0;
  transform:none;
  writing-mode:horizontal-tb;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Los dos renglones verticales siguen ocupando exactamente
   el mismo espacio aunque no sean visibles. */
.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy > span {
  display:block;
  margin:0;
  padding:0;
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  white-space:nowrap;
  transform:rotate(180deg);
  transform-origin:center;
}

/* La segunda celda sigue siendo la misma:
   línea 1px + X centrada. */
.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-arrow {
  height:100%;
  border-left:1px solid var(--pi-audit-live);
}


/* ==========================================================
   LOTE 84 · TOGGLE SIN SALTO · GEOMETRÍA BLOQUEADA
   ----------------------------------------------------------
   Dimensiones compartidas entre abierto y cerrado.
   Ningún cambio de state puede recalcular posición/ancho/alto.
   ========================================================== */

@media (min-width:1101px) {
  .pi-story-audit .pi-audit-col-action {
    width:150px !important;
    min-width:150px !important;
    align-self:stretch !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  .pi-story-audit .pi-audit-btn,
  .pi-story-audit:not(.is-open) .pi-audit-btn,
  .pi-story-audit .pi-audit-btn[aria-expanded="true"] {
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,88px) 62px !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    clip-path:none !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .pi-story-audit .pi-audit-btn-copy {
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
  }

  .pi-story-audit .pi-audit-btn-arrow {
    width:auto !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
  }
}

/* Abierto: conserva el copy como fantasma estructural. */
.pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* ==========================================================
   LOTE 113 · APERTURA ANCLADA + COBERTURA DE VIEWPORT
   ----------------------------------------------------------
   El formulario abierto conserva la solución del lote 85:
   - el banner NO cambia de posición;
   - no existe centrado vertical;
   - abrir solo añade contenido HACIA ABAJO.

   Ajuste actual:
   - en escritorio, el estado abierto ocupa como mínimo toda
     la altura visible del navegador;
   - si el contenido necesita más altura, la sección crece;
   - el footer queda fuera del viewport inicial y desaparece
     la franja negra inferior;
   - no se usa flex ni align-items:center, por lo que no vuelve
     el salto vertical que ya habíamos eliminado.
   ========================================================== */

@media (min-width:1101px) {
  .pi-story-audit,
  .pi-story-audit.is-open {
    height:auto !important;
    display:block !important;
    align-items:initial !important;
    justify-content:initial !important;
    padding:56px 20px !important;
  }

  .pi-story-audit {
    min-height:0 !important;
  }

  .pi-story-audit.is-open {
    min-height:100vh !important;
    min-height:100svh !important;
    min-height:100dvh !important;
  }

  .pi-story-audit.is-open .pi-audit-wrap {
    width:100%;
    margin:0 auto;
  }
}

/* ==========================================================
   LOTE 93 · CONFIRMACIÓN · MISMA RETÍCULA QUE EL CTA
   ----------------------------------------------------------
   La respuesta posterior al envío deja de vivir en un bloque
   centrado independiente.

   Arquitectura:
   [ VACÍO ] [ MENSAJE DE CONFIRMACIÓN ] [ VACÍO ]

   La retícula replica exactamente la cabecera del CTA:
   - mismas columnas;
   - mismos gaps;
   - mismo ancho central;
   - mismo eje horizontal del titular y del cuerpo;
   - sin offsets ni márgenes calculados a ojo.

   En móvil se conserva la misma columna de icono vacía para
   que la confirmación siga naciendo en el mismo eje que el
   mensaje principal del banner.
   ========================================================== */

.pi-story-audit .pi-audit-success {
  width:100%;
  max-width:none;
  margin:clamp(48px,6vh,72px) 0 0;
  padding:clamp(34px,4.5vw,58px) 0 0;
  border-bottom:0;
}

.pi-story-audit .pi-audit-success__grid {
  width:100%;
  display:grid;
  grid-template-columns:135px minmax(0,820px) 150px;
  column-gap:48px;
  align-items:start;
  justify-content:space-between;
}

.pi-story-audit .pi-audit-success__spacer {
  min-width:0;
  min-height:1px;
}

.pi-story-audit .pi-audit-success__content {
  grid-column:2;
  width:100%;
  max-width:820px;
  min-width:0;
  position:relative;
  padding:0 0 clamp(34px,4.5vw,58px) 28px;
}

/* La línea inferior nace en el mismo eje real que el contenido. */
.pi-story-audit .pi-audit-success__content::after {
  content:"";
  position:absolute;
  left:28px;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(0,0,0,.13);
}

.pi-story-audit .pi-audit-success__content > :first-child {
  margin-top:0;
}

/* Tablet: reproduce la misma retícula que el banner en este rango. */
@media (min-width:768px) and (max-width:1100px) {
  .pi-story-audit .pi-audit-success__grid {
    grid-template-columns:90px minmax(0,1fr) 300px;
    gap:25px;
    justify-content:stretch;
  }

  .pi-story-audit .pi-audit-success__content {
    padding-left:0;
  }

  .pi-story-audit .pi-audit-success__content::after {
    left:0;
  }
}

/* Móvil: el banner usa [62px][contenido].
   La tercera columna deja de participar, igual que el CTA. */
@media (max-width:767px) {
  .pi-story-audit .pi-audit-success {
    margin-top:42px;
    padding:30px 0 0;
  }

  .pi-story-audit .pi-audit-success__grid {
    grid-template-columns:62px minmax(0,1fr);
    gap:15px;
    justify-content:stretch;
  }

  .pi-story-audit .pi-audit-success__content {
    grid-column:2;
    padding:0 0 30px;
  }

  .pi-story-audit .pi-audit-success__content::after {
    left:0;
  }

  .pi-story-audit .pi-audit-success__spacer--action {
    display:none;
  }
}



/* ==========================================================
   LOTE 110 · HOVER REARMABLE TRAS ABRIR / CERRAR
   ----------------------------------------------------------
   El microgesto del avión y la flecha responde únicamente a
   :hover cuando el formulario está cerrado.

   Motivo:
   el botón conserva el foco después de un clic; usar
   :focus-within como disparador visual mantenía el CTA en su
   estado "hover" incluso después de cerrar el formulario.

   Accesibilidad:
   :focus-visible del botón permanece intacto para navegación
   por teclado. Solo se desacopla el movimiento decorativo.
   ========================================================== */


/* ==========================================================
   PUBLIMPACTO · LOTE 128
   PRIMERA ESTRATEGIA · BANNER · TABLET VERTICAL
   ----------------------------------------------------------
   El desktop aprobado usa una retícula estrecha para el CTA:
   [ icono ] [ mensaje principal ] [ texto vertical | flecha ]

   El breakpoint antiguo de tablet reservaba 300px al CTA,
   comprimiendo demasiado la columna central.

   Nuevo contrato tablet vertical:
   - se mantiene el padding exterior propio del componente;
   - icono con más aire respecto a su divisor;
   - columna central mucho más ancha;
   - CTA lateral estrecho y arquitectónico;
   - cerrado y abierto comparten EXACTAMENTE la misma retícula;
   - al abrir, el copy del CTA sigue siendo un fantasma
     estructural y solo queda visible el divisor + X.
   ========================================================== */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {

  /* No heredamos el gutter de las secciones 01–05:
     esta pieza mantiene su propio padding exterior. */
  .pi-story-audit,
  .pi-story-audit.is-open {
    padding-left:20px;
    padding-right:20px;
  }

  /* RETÍCULA MAESTRA · cerrada y abierta */
  .pi-story-audit .pi-audit-banner,
  .pi-story-audit.is-open .pi-audit-banner {
    grid-template-columns:96px minmax(0,1fr) 138px;
    column-gap:28px;
    align-items:stretch;
    justify-content:stretch;
  }

  /* ICONO · más pequeño y respirando dentro de su celda. */
  .pi-story-audit .pi-audit-col-icon {
    align-self:stretch;
    justify-content:center;
  }

  .pi-story-audit .pi-audit-live-icon {
    width:68px;
    height:68px;
  }

  /* MENSAJE · ahora recibe el espacio liberado del antiguo CTA de 300px. */
  .pi-story-audit .pi-audit-col-copy {
    width:100%;
    max-width:none;
    min-width:0;
    align-self:center;
    padding-left:0;
  }

  .pi-story-audit .pi-audit-col-copy h1,
  .pi-story-audit .pi-audit-col-copy h2 {
    max-width:100%;
  }

  .pi-story-audit .pi-audit-col-copy p {
    max-width:100%;
  }

  /* CTA LATERAL · misma caja en ambos estados. */
  .pi-story-audit .pi-audit-col-action,
  .pi-story-audit.is-open .pi-audit-col-action {
    width:138px;
    min-width:138px;
    align-self:stretch;
    display:flex;
    align-items:stretch;
    justify-content:stretch;
  }

  .pi-story-audit .pi-audit-btn,
  .pi-story-audit:not(.is-open) .pi-audit-btn,
  .pi-story-audit .pi-audit-btn[aria-expanded="true"] {
    position:relative;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,80px) 58px;
    align-items:stretch;
    margin:0;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent !important;
    clip-path:none !important;
    box-shadow:none !important;
    transform:none !important;
  }

  /* Texto vertical algo más próximo al divisor. */
  .pi-story-audit:not(.is-open) .pi-audit-btn-copy,
  .pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy {
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    margin:0;
    padding:0 5px 0 0;
    transform:none;
    writing-mode:horizontal-tb;
    white-space:normal;
  }

  .pi-story-audit:not(.is-open) .pi-audit-btn-copy {
    opacity:1;
    visibility:visible;
  }

  .pi-story-audit:not(.is-open) .pi-audit-btn-copy > span,
  .pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy > span {
    display:block;
    margin:0;
    padding:0;
    font-size:9.5px;
    line-height:1;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    white-space:nowrap;
    transform:rotate(180deg);
    transform-origin:center;
  }

  /* Abierto: misma huella geométrica; solo desaparece visualmente el copy. */
  .pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-copy {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Segunda celda idéntica: divisor + flecha / X. */
  .pi-story-audit:not(.is-open) .pi-audit-btn-arrow,
  .pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-btn-arrow {
    position:static;
    width:auto;
    height:100%;
    min-width:0;
    min-height:0;
    display:grid;
    place-items:center;
    margin:0;
    padding:0;
    border-left:1px solid var(--pi-audit-live);
    background:transparent;
    color:var(--pi-audit-live);
  }

  .pi-story-audit:not(.is-open) .pi-audit-icon-open {
    width:25px;
    height:25px;
  }

  .pi-story-audit .pi-audit-btn[aria-expanded="true"] .pi-audit-icon-close {
    width:13px;
    height:13px;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 129
   PRIMERA ESTRATEGIA · BANNER CERRADO MÁS COMPACTO
   TABLET VERTICAL
   ----------------------------------------------------------
   Se reduce exclusivamente el aire exterior del estado cerrado:
   56px -> 26px arriba y abajo (-30px por lado).

   No se modifica:
   - la retícula interna del banner;
   - sus 60px de margen interno;
   - el estado abierto;
   - la correlación horizontal cerrado / abierto.
   ========================================================== */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  .pi-story-audit:not(.is-open) {
    padding-top:26px;
    padding-bottom:26px;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 130
   FORMULARIO ABIERTO · TABLET VERTICAL
   ----------------------------------------------------------
   Ajustes sobre el estado abierto:
   - intro "¿Tu marca está contando...?" ocupa todo el ancho;
   - desaparecen los max-width editoriales heredados de desktop;
   - contenido interior con 24px de aire lateral;
   - formulario conserva sus dos columnas en tablet;
   - margen inferior antes del footer = ritmo general tablet
     de 102px, igual que las secciones 01–05.
   El banner superior permanece intacto.
   ========================================================== */

@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {

  /* El estado abierto mantiene el banner tal como quedó aprobado,
     pero gana el mismo cierre vertical que las secciones principales. */
  .pi-story-audit.is-open {
    padding-bottom:102px;
  }

  /* Aire interior específico del área de formulario.
     No modifica el ancho ni la retícula del banner superior. */
  .pi-story-audit.is-open .pi-audit-panel {
    width:100%;
    padding-inline:24px;
  }

  .pi-story-audit.is-open .pi-audit-panel-inner {
    width:100%;
    grid-template-columns:1fr;
    gap:42px;
  }

  /* Intro editorial: ancho real completo de la zona disponible. */
  .pi-story-audit.is-open .pi-audit-panel-intro {
    width:100%;
    max-width:none;
  }

  .pi-story-audit.is-open .pi-audit-panel-intro h2,
  .pi-story-audit.is-open .pi-audit-panel-intro h3,
  .pi-story-audit.is-open .pi-audit-panel-intro p {
    width:100%;
    max-width:none;
  }

  /* El formulario ocupa toda la retícula útil debajo de la intro. */
  .pi-story-audit.is-open .pi-audit-form {
    width:100%;
    max-width:none;
    min-width:0;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 148
   PRIMERA ESTRATEGIA · TABLET HORIZONTAL
   ----------------------------------------------------------
   Contrato:
   - mismo safe-area lateral que el contenido Storytelling;
   - se aplica tanto al banner cerrado como abierto;
   - se aplica también a todo el formulario desplegado;
   - el estado abierto abandona cualquier lógica fullscreen;
   - la sección crece únicamente según su contenido real.
   ========================================================== */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  /* Safe area común con Hero + 01–05.
     Izquierda y derecha permanecen asimétricas porque el logo P
     fue desplazado 20px hacia el borde en este breakpoint. */
  .pi-story-audit,
  .pi-story-audit.is-open {
    width:100%;
    padding-left:var(--pi-se-tablet-landscape-safe-left, 88px);
    padding-right:var(--pi-se-tablet-landscape-safe-right, 108px);
    box-sizing:border-box;
  }

  /* El banner cerrado y abierto comparten exactamente el mismo eje. */
  .pi-story-audit .pi-audit-wrap,
  .pi-story-audit.is-open .pi-audit-wrap {
    width:100%;
    max-width:1380px;
    margin-inline:auto;
  }

  /* Estado abierto: altura natural.
     No 100vh / 100svh / 100dvh, no centrado vertical forzado. */
  .pi-story-audit.is-open {
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    display:block !important;
    align-items:initial !important;
    justify-content:initial !important;
    overflow:visible;
  }

  /* El panel completo queda dentro del mismo safe-area lateral. */
  .pi-story-audit.is-open .pi-audit-panel,
  .pi-story-audit.is-open .pi-audit-panel-inner,
  .pi-story-audit.is-open .pi-audit-form {
    width:100%;
    max-width:none;
    min-width:0;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 149
   FIX REAL · GAP FORMULARIO TABLET HORIZONTAL
   ----------------------------------------------------------
   Causa del fallo del Lote 148:
   existe una regla desktop @media (min-width:1101px) con:
     padding:56px 20px !important;
   Al superar la tablet horizontal los 1101px CSS, ese shorthand
   con !important anulaba los padding-left/right del Lote 148.

   Corrección:
   - reafirmamos safe-area lateral con !important;
   - cerrado y abierto reciben exactamente el mismo eje;
   - el estado abierto sigue SIN fullscreen.
   ========================================================== */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  .pi-story-audit,
  .pi-story-audit.is-open {
    padding-left:var(--pi-se-tablet-landscape-safe-left, 88px) !important;
    padding-right:var(--pi-se-tablet-landscape-safe-right, 108px) !important;
  }

  .pi-story-audit.is-open {
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    display:block !important;
    align-items:initial !important;
    justify-content:initial !important;
  }
}


/* ==========================================================
   PUBLIMPACTO · LOTE 151
   PRIMERA ESTRATEGIA · TABLET HORIZONTAL · MENOS AIRE VERTICAL
   ----------------------------------------------------------
   Ajuste solicitado:
   CERRADO
   - reducimos 40px el aire exterior superior;
   - reducimos 40px el aire exterior inferior.

   ABIERTO
   - reducimos 40px únicamente el aire exterior superior;
   - conservamos el cierre inferior existente;
   - el formulario sigue creciendo por altura natural;
   - se mantiene el safe-area lateral del Lote 149;
   - se mantiene el reencuadre al abrir del Lote 150.
   ========================================================== */

@media
  (min-width:1024px) and
  (max-width:1600px) and
  (orientation:landscape) and
  (any-pointer:coarse) {

  /* Cerrado: 56px → 16px arriba y abajo. */
  .pi-story-audit:not(.is-open) {
    padding-top:16px !important;
    padding-bottom:16px !important;
  }

  /* Abierto: 56px → 16px solo arriba.
     Abajo conserva los 56px heredados. */
  .pi-story-audit.is-open {
    padding-top:16px !important;
    padding-bottom:56px !important;
  }
}