/* Página de Cobertura: encabezado con tecnologías, mapa de Google con la
   oficina, formulario por pasos y explicación del proceso. */

.cv {
  --c-red: #e60012; --c-ink: #151923; --c-body: #5b6472; --c-mute: #8a93a1; --c-soft: #fdecee;
  --c-hair: rgba(16, 20, 26, .08); --c-ease: cubic-bezier(.22, .8, .24, 1);
}
.cv-shell { max-width: 1180px; }

/* Encabezado */
.cv-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 48px; align-items: end; margin-bottom: 34px; }
.cv-hero h1 {
  margin: 0 0 14px; color: var(--c-ink);
  font: 800 clamp(38px, 5vw, 66px)/1 'Baloo 2', 'Manrope', sans-serif; letter-spacing: -.035em;
}
.cv-hero h1 em { font-style: normal; color: var(--c-red); }
.cv-lead { margin: 0; max-width: 56ch; color: var(--c-body); font: 400 1.05rem/1.6 'DM Sans', sans-serif; }
.cv-techs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cv-techs li {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: #fff;
  box-shadow: 0 14px 30px -24px rgba(16, 22, 30, .5), 0 0 0 1px var(--c-hair);
  transition: transform .3s var(--c-ease);
}
.cv-techs li:hover { transform: translateX(-4px); }
.cv-ti { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-soft); color: var(--c-red); }
.cv-ti svg { width: 22px; height: 22px; }
.cv-techs span:last-child { display: grid; }
.cv-techs b { font: 800 .95rem 'Manrope', sans-serif; color: var(--c-ink); }
.cv-techs small { font: 500 .8rem 'DM Sans', sans-serif; color: var(--c-mute); }

/* Mapa + formulario */
.cv-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: stretch; }
.cv-map {
  position: relative; min-height: 640px; overflow: hidden; border-radius: 28px; background: #e9edf1;
  box-shadow: 0 30px 60px -36px rgba(16, 22, 30, .55), 0 0 0 1px var(--c-hair);
}
.cv-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cv-office {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;
  display: grid; gap: 8px; padding: 20px 22px; border-radius: 22px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px);
  box-shadow: 0 24px 44px -24px rgba(16, 22, 30, .55), 0 0 0 1px var(--c-hair);
}
.cv-live {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 999px;
  background: var(--c-soft); font: 800 .66rem 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red);
}
.cv-live i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 3px rgba(31, 157, 85, .2); }
.cv-office h2 { margin: 2px 0 2px; font: 800 1.35rem/1.1 'Baloo 2', 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--c-ink); }
.cv-office p { display: flex; gap: 10px; margin: 0; color: var(--c-body); font: 500 .88rem/1.45 'DM Sans', sans-serif; }
.cv-office p svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--c-red); }
.cv-office-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.cv-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: linear-gradient(110deg, #f5182d, #d70012); box-shadow: 0 12px 24px -12px rgba(230, 0, 18, .75);
  font: 800 .86rem 'Manrope', sans-serif; color: #fff; text-decoration: none; transition: transform .25s var(--c-ease);
}
.cv-btn:hover { transform: translateY(-2px); }
.cv-btn svg { width: 17px; height: 17px; }
.cv-btn-ghost { background: #fff; color: var(--c-ink); box-shadow: 0 0 0 1px rgba(16, 20, 26, .14); }
.cv-btn-ghost svg { color: var(--c-red); }

/* Formulario */
.cv .cv-form {
  margin: 0 !important; padding: 28px !important; border: 0; border-radius: 28px; background: #fff;
  box-shadow: 0 30px 60px -36px rgba(16, 22, 30, .55), 0 0 0 1px var(--c-hair);
}
.cv-form-head { display: flex; gap: 14px; margin-bottom: 20px; }
.cv-form-i { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--c-red); color: #fff; box-shadow: 0 12px 24px -12px rgba(230, 0, 18, .8); }
.cv-form-i svg { width: 26px; height: 26px; }
.cv .cv-form h2 { margin: 0 0 4px; font: 800 1.6rem/1.1 'Baloo 2', 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--c-ink); }
.cv-form-head p { margin: 0; color: var(--c-body); font: 400 .9rem/1.5 'DM Sans', sans-serif; }
.cv .cv-grid { gap: 12px 12px; }
.cv-step {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 8px 0 -2px;
  font: 800 .78rem 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink);
}
.cv-step:first-child { margin-top: 0; }
.cv-step span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-soft); color: var(--c-red); font-size: .74rem; letter-spacing: 0; }
.cv .zone-form label { color: #5b6472; }
.cv .zone-form input, .cv .zone-form select { border-color: #dfe4ea; background: #f7f8fa; border-radius: 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
.cv .zone-form input:focus, .cv .zone-form select:focus { background: #fff; }
.cv .cv-submit {
  grid-column: 1 / -1; width: 100%; gap: 10px; min-height: 54px; margin-top: 6px;
  background: #1f9d55; box-shadow: 0 14px 28px -14px rgba(31, 157, 85, .8); font: 800 .95rem 'Manrope', sans-serif; color: #fff;
  transition: transform .25s var(--c-ease), background .25s;
}
.cv .cv-submit::after { content: none; }
.cv .cv-submit:hover { transform: translateY(-2px); background: #178a49; }
.cv .cv-submit svg { width: 20px; height: 20px; }
.cv .zone-form output[data-state="error"] { color: var(--c-red); }

/* Proceso */
.cv-how { margin-top: 26px; padding: 26px 28px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--c-hair); }
.cv-how h2 { margin: 0 0 18px; font: 800 1.3rem 'Baloo 2', 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--c-ink); }
.cv-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cv-how li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
.cv-how span { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-soft); font: 800 .85rem 'Manrope', sans-serif; color: var(--c-red); }
.cv-how b { font: 800 .98rem 'Manrope', sans-serif; color: var(--c-ink); }
.cv-how small { font: 400 .86rem/1.5 'DM Sans', sans-serif; color: var(--c-body); }

/* Responsive */
@media (max-width: 980px) {
  .cv-hero { grid-template-columns: 1fr; align-items: start; }
  .cv-techs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cv-main { grid-template-columns: 1fr; }
  .cv-map { min-height: 520px; }
}
@media (max-width: 640px) {
  .cv-techs { grid-template-columns: 1fr; }
  .cv-map { min-height: 0; display: flex; flex-direction: column; }
  .cv-map iframe { position: relative; height: 300px; }
  .cv-office { position: relative; inset: auto; margin: 0; border-radius: 0; box-shadow: none; }
  .cv .cv-form { padding: 20px !important; }
  .cv .cv-grid { grid-template-columns: 1fr; }
  .cv-how { padding: 20px; }
  .cv-how ol { grid-template-columns: 1fr; }
}