/* Landing: los que ya operan, cupón de suscripción, colofón, aviso, iconos y reducción de movimiento.
   Salió del <style> en línea de index.html (regla de 1,500 líneas, revisión 10-18).
   index.html carga las cuatro hojas seguidas y en este orden, en el mismo lugar
   donde estaba el <style>: la cascada es la misma. Rutas url() relativas a css/. */

/* ==========================================================
   LOS QUE YA OPERAN (clientes)
   ========================================================== */
.operan {
  margin-top: clamp(48px, 7vw, 88px);
  border-top: 4px double var(--xt-line-strong);
  border-bottom: 1px solid var(--xt-line-strong);
  background: var(--xt-crema-2);
}
.operan__in {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
  padding-top: clamp(26px, 3.6vw, 40px);
  padding-bottom: clamp(26px, 3.6vw, 40px);
}
.operan__txt { max-width: 380px; }
.operan__txt h3 {
  font-family: var(--xt-font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.15;
  color: var(--xt-carbon);
  margin: 8px 0 8px;
}
.operan__txt h3 em { font-style: italic; color: var(--xt-terracota); }
.operan__txt p { font-size: 14px; line-height: 1.6; color: var(--xt-texto-sec); margin: 0; }
.operan__logos { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; flex: 1; justify-content: center; }
.operan__logos li { flex: 1 1 200px; max-width: 280px; display: flex; }
.logo-plate {
  margin: 0;
  width: 100%;
  border: 1px solid var(--xt-line-strong);
  background: var(--xt-crema);
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  transition: transform 0.4s var(--xt-ease), box-shadow 0.4s var(--xt-ease);
}
.logo-plate:hover { transform: translateY(-4px); box-shadow: 0 2px 0 rgba(42,54,61,0.08), 0 16px 32px -18px rgba(42,54,61,0.22); }
.logo-plate img { height: 52px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.logo-plate img.logo-plate__ancho { height: 40px; margin: 6px 0; }
.logo-plate figcaption { display: flex; flex-direction: column; gap: 3px; }
.logo-plate figcaption b { font-size: 13.5px; font-weight: 600; color: var(--xt-carbon); line-height: 1.3; }
.logo-plate figcaption span {
  font-family: var(--xt-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xt-texto-sec);
  line-height: 1.4;
}

/* ==========================================================
   CUPÓN DE SUSCRIPCIÓN (contacto / demo)
   ========================================================== */
.cupon-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(26px, 4.5vw, 64px);
  align-items: start;
}
@media (max-width: 1023px) { .cupon-sec__grid { grid-template-columns: 1fr; } }
.cupon-sec__txt h2 {
  font-family: var(--xt-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--xt-carbon);
  margin: 16px 0 18px;
}
.cupon-sec__txt h2 em { font-style: italic; color: var(--xt-terracota); }
.cupon-sec__txt h2 .marca-inline { height: 0.82em; width: auto; display: inline-block; vertical-align: -0.1em; }
.cupon-sec__txt > p { font-size: 16px; line-height: 1.7; color: var(--xt-texto-sec); margin: 0 0 26px; max-width: 460px; }
.cn-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--xt-line); }
.cn-item:last-child { border-bottom: 1px solid var(--xt-line); }
.cn-ico { width: 22px; height: 22px; color: var(--xt-terracota); flex: none; margin-top: 2px; }
.cn-ico svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: square; }
.cn-label { font-family: var(--xt-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--xt-texto-sec); margin-bottom: 3px; }
.cn-value { font-size: 15px; color: var(--xt-carbon); font-weight: 600; }
.cn-value a { text-decoration: none; color: var(--xt-carbon); transition: color 0.3s var(--xt-ease); }
.cn-value a:hover { color: var(--xt-terracota); }

.cupon {
  position: relative;
  border: 2px dashed var(--xt-line-strong);
  background: var(--xt-crema);
  padding: clamp(22px, 3.4vw, 40px);
}
.cupon__tijeras {
  position: absolute;
  top: -13px; right: 36px;
  background: var(--xt-crema);
  padding: 0 8px;
  color: var(--xt-texto-sec);
}
.cupon__tijeras svg { width: 22px; height: 22px; display: block; transform: rotate(-90deg); }
.cupon__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 4px double var(--xt-line-strong);
  padding-bottom: 12px;
  margin-bottom: 22px;
}
.cupon__head .titulo {
  font-family: var(--xt-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--xt-carbon);
}
.cupon__head .valor {
  font-family: var(--xt-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xt-terracota);
}
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label {
  font-family: var(--xt-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xt-texto-sec);
}
.input-ed, .select-ed, .textarea-ed {
  width: 100%;
  font-family: var(--xt-font-body);
  font-size: 16px; /* mínimo 16px: evita el zoom automático de iOS al enfocar */
  color: var(--xt-carbon);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--xt-line-strong);
  border-radius: 0;
  padding: 10px 2px;
  outline: none;
  transition: border-color 0.3s var(--xt-ease);
}
.input-ed::placeholder, .textarea-ed::placeholder { color: rgba(94,106,112,0.55); }
.input-ed:focus, .select-ed:focus, .textarea-ed:focus { border-bottom-color: var(--xt-terracota); }
.select-ed { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' fill='none' stroke='%232A363D' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.textarea-ed { min-height: 76px; resize: vertical; }
.campo-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 599px) { .campo-2col { grid-template-columns: 1fr; } }
.cupon__nota { font-size: 12px; text-align: center; color: var(--xt-texto-sec); margin: 14px 0 0; }

/* ==========================================================
   COLOFÓN (footer)
   ========================================================== */
.colofon {
  background: var(--xt-carbon);
  color: var(--xt-crema);
  margin-top: clamp(48px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}
.colofon .footer-greca {
  position: absolute; inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'><path d='M0,60 V0 H60 V40 H20 V20 H40 V60' fill='none' stroke='%23ffffff' stroke-width='2.5'/><path d='M60,0 V60 H120 V20 H80 V40 H100 V0' fill='none' stroke='%23ffffff' stroke-width='2.5'/></svg>");
  background-size: 240px auto;
  animation: grecaMove 90s linear infinite;
  pointer-events: none;
}
@keyframes grecaMove { from { background-position: 0 0; } to { background-position: 480px 0; } }
.colofon__in { position: relative; padding-top: clamp(40px, 6vw, 72px); padding-bottom: 26px; }
.colofon__masthead {
  border-bottom: 1px solid rgba(255,248,240,0.16);
  padding-bottom: 26px;
  margin-bottom: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.colofon__masthead img { height: 42px; width: auto; }
.colofon__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 38px; }
@media (max-width: 767px) { .colofon__cols { grid-template-columns: repeat(2, 1fr); } }
.colofon__cols .rotulo {
  font-family: var(--xt-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,248,240,0.55);
  margin-bottom: 14px;
}
.colofon__cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.colofon__cols a {
  color: rgba(255,248,240,0.85);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s var(--xt-ease);
}
.colofon__cols a:hover { color: var(--xt-terracota); }
.colofon__legal {
  border-top: 1px solid rgba(255,248,240,0.12);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--xt-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,248,240,0.55);
}
.colofon__social { display: flex; gap: 10px; align-items: center; }
.colofon__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,248,240,0.16);
  color: rgba(255,248,240,0.85);
  transition: color 0.3s var(--xt-ease), border-color 0.3s var(--xt-ease);
}
.colofon__social a:hover { color: var(--xt-terracota); border-color: var(--xt-terracota); }

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translate(-50%, 140%);
  background: var(--xt-carbon);
  color: var(--xt-crema);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-left: 4px solid var(--xt-jade);
  font-size: 14px;
  font-weight: 600;
  z-index: 1400;
  transition: transform 0.5s var(--xt-ease);
  max-width: min(92vw, 480px);
}
.toast.show { transform: translate(-50%, 0); }
.toast.err { border-left-color: var(--xt-alerta); }
.toast .ico-toast { flex: none; }

/* ---- Iconos editoriales (lápiz escribiendo) ---- */
.icono-xt { --xt-dash: 0; }
.icono-xt--anima { --xt-dash: 1200; --xt-jade-op: 0; }
.icono-xt--anima.is-visible { --xt-dash: 0; --xt-jade-op: 1; }

/* ---- Reducción de movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .titular .ln > span { transform: none; transition: none; }
  .titular-iso { opacity: 1; transform: translateY(-50%); transition: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .h-in { opacity: 1; transform: none; transition: none; }
  .hero-greca,
  .cronica__fig.anima-caos .diag-nodo,
  .diag-marca-x > g,
  .diag-hub__anillo,
  .colofon .footer-greca { animation: none !important; }
  .paso { opacity: 1; }
  .grano { display: none; }
  .pc-price.flashing { animation: none; }
}