/* mktn.es · Páginas de conversión, ola A (Claude Design "Ola A - Conversion" y "Ola A - Formulario"): /contactar/ y /prototipo-gratis/.
   Se carga después de service.css y service2.css. Formulario compartido (.fm), rejilla 7/5 con columna lateral (.cv-*) y bloques del prototipo (.pt-*).
   Error: #9B2C20 (nuevo en el sistema; 7,57:1 sobre blanco, 6,12:1 sobre el panel). Puntos de ruptura: móvil < 1024, tableta 1024 a 1279, escritorio 1280 o más. */

/* ── Formulario ── */
.fm { --er: #9B2C20; position: relative; display: flex; flex-direction: column; gap: 32px; padding: 40px; background: #E9E7E1; border-radius: 6px; margin: 0; }
.fm .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fm .f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fm .form-step { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fm .fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fm label, .fm legend { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.35; padding: 0; }
.fm .rq { color: var(--green); }
.fm .op { font-weight: 400; color: var(--soft); }
.fm .hint { margin: -2px 0 2px; font-size: 15px; line-height: 1.45; color: #5E5D58; text-wrap: pretty; }
.fm input[type="text"], .fm input[type="email"], .fm input[type="tel"], .fm input[type="url"], .fm select, .fm textarea {
  width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #5E5D58; border-radius: 6px; background: #fff; color: var(--ink);
  font: inherit; font-size: 17px; line-height: 1.5; transition: border-color .3s cubic-bezier(.4, 0, .2, 1); }
.fm textarea { display: block; padding: 14px 16px; min-height: 182px; resize: vertical; }
.fm textarea.short { min-height: 104px; }
.fm input::placeholder, .fm textarea::placeholder { color: #5E5D58; opacity: 1; }
.fm .sel { position: relative; display: block; }
.fm select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.fm .sel .chev { position: absolute; right: 16px; top: 50%; margin-top: -10px; pointer-events: none; }
.fm input:focus-visible, .fm select:focus-visible, .fm textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.fm [aria-invalid="true"] { border: 2px solid var(--er); padding-left: 15px; }
.fm .fld:has([aria-invalid="true"]) > label::after { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B2C20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.fm fieldset.chk { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fm fieldset.chk legend { margin: 0 0 10px; }
.fm .chk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fm .form-checkbox-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; background: #fff; border: 1px solid var(--rule); font-size: 16px; font-weight: 400; line-height: 1.35; cursor: pointer; }
.fm .form-checkbox-item:has(input:checked) { border-color: var(--ink); font-weight: 600; }
.fm input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--green); cursor: pointer; }
.fm input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fm .form-rgpd { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 15px; line-height: 1.5; }
.fm .form-rgpd input { margin-top: 1px; }
.fm .form-rgpd label { display: block; font-weight: 400; font-size: 15px; }
.fm .form-rgpd a { font-weight: 600; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
.fm .form-rgpd:has([aria-invalid="true"]) label { color: var(--er); }
.fm .form-error-msg { display: none; margin: 0; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--er); border-radius: 6px; background: #fff; color: var(--er); font-size: 16px; font-weight: 600; line-height: 1.45; }
.fm .form-error-msg.is-visible { display: flex; }
.fm .form-error-msg::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B2C20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.fm .fm-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-submit, .btn-back { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 28px; border: 2px solid var(--ink); background: var(--ink); color: #F4F3EF; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: background-color .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1); }
.btn-submit:hover { background: var(--green); border-color: var(--green); }
.btn-back { background: transparent; color: var(--ink); padding: 0 24px; }
.btn-back:hover { background: var(--ink); color: #F4F3EF; }
.btn-submit:focus-visible, .btn-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-submit:disabled, .btn-back:disabled { background: #5E5D58; border-color: #5E5D58; color: #F4F3EF; cursor: wait; }
.btn-submit.is-busy::before { content: ""; width: 18px; height: 18px; border: 2.2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fmSpin 1s linear infinite; }
@keyframes fmSpin { to { transform: rotate(360deg); } }
.fm [disabled] { background-color: #E9E7E1; color: #5E5D58; }
.fm .form-step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 0; font-size: 15px; font-weight: 600; }
.fm .form-progress { display: flex; align-items: center; gap: 6px; flex: none; order: -1; }
.fm .form-progress-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #5E5D58; box-sizing: border-box; }
.fm .form-progress-dot.is-active { background: var(--ink); border-color: var(--ink); }
.fm .form-progress-dot + .form-progress-dot { position: relative; margin-left: 30px; }
.fm .form-progress-dot + .form-progress-dot::before { content: ""; position: absolute; right: 100%; top: 50%; width: 24px; height: 2px; margin: -1px 4px 0 0; background: var(--rule); }
/* sin JavaScript: los dos pasos se ven seguidos y no hay Siguiente ni Volver; con JavaScript solo se ve el paso activo */
html:not(.js) #btnNext, html:not(.js) #btnBack { display: none; }
html.js #formStep2 { display: none; }
.form-success { display: none; flex-direction: column; gap: 16px; align-items: flex-start; padding: 48px 40px; background: #D7EDE8; color: #10302B; border-radius: 6px; }
.form-success.is-visible { display: flex; }
.form-success svg { stroke: var(--green); }
.form-success-title { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
.form-success-text { margin: 0; max-width: 34em; text-wrap: pretty; }
.form-success-text a, .form-success-text strong { color: #10302B; font-weight: 600; }

/* ── Rejilla 7/5: formulario a la izquierda, columna lateral a la derecha ── */
.cv-main { padding: 0 var(--gut) var(--sec); }
.cv-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: start; }
.cv-main .cv-grid { border-top: 2px solid var(--ink); padding-top: 40px; }
.cv-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cv-proto { margin: 0; font-size: 17px; line-height: 1.45; }
.cv-proto a { font-weight: 600; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-block; padding: 10px 0; }
.cv-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 40px; align-items: start; min-width: 0; }
.cv-reviews { display: flex; flex-direction: column; gap: 32px; }
.cv-reviews figure { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--rule); margin: 0; }
.cv-reviews figcaption { display: flex; gap: 12px; align-items: center; }
.cv-reviews img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--rule); }
.cv-reviews figcaption span:not(.rs) { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; }
.cv-reviews figcaption strong { font-weight: 600; font-size: 15px; }
.cv-reviews figcaption small { font-size: 14px; color: var(--mute); }
.cv-reviews .rs { margin-left: auto; font-size: 15px; letter-spacing: .08em; color: var(--green); }
.cv-reviews blockquote { margin: 0; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.cv-blocks { display: flex; flex-direction: column; gap: 40px; }
.cv-blocks .sidebar-block { display: flex; flex-direction: column; gap: 16px; }
.sidebar-label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.cv-who { padding-top: 20px; border-top: 2px solid var(--ink); }
.cv-who-row { display: flex; gap: 16px; align-items: center; }
.cv-who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--rule); }
.cv-who .sidebar-profile-info { display: flex; flex-direction: column; line-height: 1.35; }
.cv-who .sidebar-profile-name { font-weight: 600; }
.cv-who .sidebar-profile-role { font-size: 15px; color: var(--mute); }
.cv-who .sidebar-para { margin: 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.contact-direct-item { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cv-fit .sidebar-label { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.fit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.fit-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.45; }
.fit-list svg { margin-top: 2px; }
.fit-yes svg { color: var(--green); } .fit-no svg { color: #5E5D58; }
.cv-hero .sv2-hero-in { gap: var(--heroGap); }
.cv-hero h1 { font-size: calc(var(--h1) * .7); max-width: 15em; line-height: .95; letter-spacing: -.045em; }
.cv-hero .sv2-lead { max-width: 34em; }
@media (max-width: 1279px) {
  .cv-grid { grid-template-columns: minmax(0, 1fr); }
  .cv-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-form { max-width: 760px; }
}
@media (max-width: 1023px) {
  .fm { padding: 24px 20px; }
  .fm .f2, .fm .chk-grid { grid-template-columns: minmax(0, 1fr); }
  .cv-aside { grid-template-columns: minmax(0, 1fr); }
  .cv-main .cv-grid { padding-top: 32px; }
  .cv-hero h1 { font-size: var(--h1); }
  .form-success { padding: 28px 20px; }
}

/* ── Prototipo gratis ── */
.pt { --ptH1: 80px; --ptTop: 72px; --ptB: 96px; --ptEx: 88px; --ptFH2: 56px; --ptFL: 19px; }
@media (max-width: 1279px) { .pt { --ptH1: 60px; --ptTop: 56px; --ptB: 80px; --ptEx: 72px; --ptFH2: 44px; --ptFL: 18px; } }
@media (max-width: 1023px) { .pt { --ptH1: 40px; --ptTop: 32px; --ptB: 56px; --ptEx: 56px; --ptFH2: 32px; --ptFL: 17px; } }
.pt-hero { padding: calc(56px + var(--ptTop)) var(--gut) var(--ptB); }
.pt-hero .pt-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.pt-hero-l { display: flex; flex-direction: column; gap: 24px; }
.pt-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pt-tags li { font-size: 13px; font-weight: 600; padding: 5px 9px; background: #E9E7E1; border-radius: 3px; color: var(--soft); }
.pt-hero h1 { margin: 0; font-size: var(--ptH1); line-height: .94; font-weight: 600; letter-spacing: -.05em; max-width: 12em; text-wrap: balance; }
.pt-hero h1 .a { color: var(--green); }
.pt-hero-r { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pt-sub { margin: 0; font-size: var(--lead); line-height: 1.45; max-width: 30em; text-wrap: pretty; }
.pt-sub2 { margin: 0; max-width: 34em; text-wrap: pretty; }
.pt-sub2 strong { font-weight: 600; }
/* ejemplo real: prueba compacta en banda neutra; textos y cifras a la izquierda, el antes y el despues a la derecha, sin solape */
.pt-ex { background: #E9E7E1; color: var(--ink); padding: var(--ptEx) var(--gut); }
.pt-ex-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 64px; align-items: center; }
.pt-ex-l { display: flex; flex-direction: column; gap: 20px; }
.pt-ex h2 { margin: 0; font-size: var(--h2s); line-height: 1; font-weight: 600; letter-spacing: -.035em; }
.pt-note { margin: 0; max-width: 30em; color: var(--soft); text-wrap: pretty; }
.pt-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid #C9C6BE; }
.pt-stats > div { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 12px 0; border-bottom: 1px solid #C9C6BE; }
.pt-stats dd { margin: 0; order: -1; font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.pt-stats dd .proto-stat-unit { font-size: inherit; }
.pt-stats dt { font-size: 14px; color: var(--mute); }
.pt-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 20px; align-items: end; }
.pt-pair figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-pair figcaption { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; background: #F4F3EF; color: var(--mute); }
.pt-pair .is-after figcaption { background: var(--ink); color: #F4F3EF; }
.pt-pair img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 6px; display: block; background: var(--rule); }
.pt-pair .is-after img { aspect-ratio: 16 / 10; outline: 2px solid var(--ink); outline-offset: 3px; }
.pt-form { padding: var(--sec) var(--gut); }
.pt-form-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.pt-form-head h2 { margin: 0; font-size: var(--ptFH2); line-height: .98; font-weight: 600; letter-spacing: -.045em; text-wrap: balance; }
.pt-form-head p { margin: 0; font-size: var(--ptFL); line-height: 1.45; color: var(--soft); max-width: 30em; }
.pt-form .cv-grid { border-top: 2px solid var(--ink); padding-top: 40px; }
.pt-steps h3, .pt-gets h3 { margin: 0; }
.pt-steps .b span strong { font-size: inherit; line-height: inherit; font-weight: 600; color: var(--ink); }
.pt-band .sidebar-block { display: flex; flex-direction: column; gap: 16px; }
.pt-band { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; align-items: start; }
.pt-band .cv-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.pt-band .cv-reviews figure { gap: 12px; padding-top: 16px; }
.pt-band .cv-reviews blockquote { font-size: 17px; }
.pt-steps .sidebar-label, .pt-gets .sidebar-label { font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.pt-steps ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.pt-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.pt-steps .n { font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -.03em; color: var(--green); font-variant-numeric: tabular-nums; }
.pt-steps .b { display: flex; flex-direction: column; gap: 4px; }
.pt-steps .b strong { font-size: 19px; line-height: 1.25; font-weight: 600; }
.pt-steps .b span { font-size: 16px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.pt-gets ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-gets li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 17px; line-height: 1.45; }
.pt-gets svg { color: var(--green); margin-top: 3px; }
.pt .sv-faq.faq .pt-faq-t { margin: 0; color: var(--ink); font-size: var(--h2); line-height: .9; font-weight: 600; letter-spacing: -.05em; max-width: 12em; text-wrap: balance; }
@media (max-width: 1279px) { .pt-hero .pt-hero-in { gap: 28px 40px; } }
@media (max-width: 1023px) {
  .pt-hero .pt-hero-in, .pt-form-head, .pt-ex-in, .pt-band { grid-template-columns: minmax(0, 1fr); }
  .pt-band .cv-reviews { grid-template-columns: minmax(0, 1fr); }
  .pt-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
  .pt-pair .is-after img { aspect-ratio: 3 / 4; }
  .pt-form .cv-grid { padding-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .btn-submit, .btn-back, .fm input, .fm select, .fm textarea { transition: none; } .btn-submit.is-busy::before { animation: none; } }


/* ── /contactar/ (Claude Design, ronda 7, variante 7a): cabecera fija a la izquierda con "Con quién hablas"; formulario en panel a la derecha; banda inferior ── */
.cv7 { --h1c: 56px; --hAv: 96px; --hFs: 20px; --hNm: 22px; --cvTop: 72px; --cvB: 112px; }
@media (max-width: 1279px) { .cv7 { --h1c: 44px; --hAv: 88px; --hFs: 19px; --hNm: 20px; --cvTop: 56px; --cvB: 88px; } }
@media (max-width: 1023px) { .cv7 { --h1c: 34px; --hAv: 72px; --hFs: 18px; --hNm: 19px; --cvTop: 40px; --cvB: 64px; } }
.cv7-main { padding: var(--cvTop) var(--gut) var(--cvB); }
.cv7-grid { display: flex; flex-direction: column; gap: 40px; max-width: 1312px; margin: 0 auto; }
.cv7-top { display: flex; flex-direction: column; gap: 40px; }
.cv7-head-in { display: flex; flex-direction: column; gap: 32px; }
.cv7-title { display: flex; flex-direction: column; gap: 24px; }
.cv7 h1 { margin: 0; font-size: var(--h1c); line-height: .96; font-weight: 600; letter-spacing: -.045em; max-width: 15em; text-wrap: balance; }
.cv7 h1 span { color: var(--green); }   /* acento del titular en ?ref=presencia-web y ?ref=mantenimiento */
.cv7 .sv2-lead { margin: 0; font-size: var(--lead); line-height: 1.55; max-width: 30em; text-wrap: pretty; }
.cv7 .sv2-lead strong { font-weight: 700; }
.cv7 mark { background: #D7EDE8; color: var(--ink); font-weight: 600; padding: .05em .25em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cv7 .cv-who { display: flex; flex-direction: column; padding-top: 24px; border-top: 2px solid var(--ink); gap: 16px; }
.cv7 .cv-who img { width: var(--hAv); height: var(--hAv); }
.cv7 .cv-who .sidebar-profile-name { font-size: var(--hNm); }
.cv7 .cv-who .sidebar-para { font-size: var(--hFs); line-height: 1.42; letter-spacing: -.01em; }
.cv7 .cv-who .sidebar-para strong { font-weight: 700; }
.cv7 .cv-form { gap: 16px; }
.cv7-band { display: flex; flex-direction: column; gap: 40px; padding-top: 32px; border-top: 2px solid var(--ink); }
.cv7-band .cv-reviews { gap: 20px; }
.cv7-band .cv-reviews figure { gap: 10px; padding-top: 16px; }
.cv7-band .cv-reviews blockquote { font-size: 16px; }
.cv7-band-r { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.cv7-band .sidebar-block { display: flex; flex-direction: column; gap: 16px; }
.cv7-fits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 40px; }
@media (min-width: 1024px) {
  .cv7-grid { gap: 48px; }
  .cv7-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .cv7 .cv-form { max-width: none; }
  .cv7-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; padding-top: 48px; }
  .cv7-fits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv7 .fm { padding: 32px; }
}
@media (min-width: 1280px) { .cv7 .fm { padding: 40px; } }
/* la cabecera acompaña al rellenar solo en pantallas altas (no se corta por abajo) */
@media (min-width: 1024px) and (min-height: 900px) { .cv7-head { position: sticky; top: 88px; } }

/* el botón de la cabecera de /prototipo-gratis/ baja al formulario con un desplazamiento suave (solo si el sistema no pide reducir movimiento) */
@media (prefers-reduced-motion: no-preference) { html:has(main.pt) { scroll-behavior: smooth; } }