/* Mantenimiento PrestaShop — continuity plan (visual builder) */

/* Fonts: Plus Jakarta Sans is already loaded sitewide; Georgia for display. No @import. */



.page-mantenimiento-prestashop,

.mt-page {

  --mt-ink: #06261f;

  --mt-slate: #1a332d;

  --mt-muted: #2f4a42;

  --mt-teal: #0b7a5e;

  --mt-teal-soft: rgba(11, 122, 94, 0.12);

  --mt-paper: #f3f8f6;

  --mt-line: rgba(6, 38, 31, 0.12);

  --mt-display: Georgia, "Times New Roman", serif;

  --mt-sans: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;

  font-family: var(--mt-sans);

  color: var(--mt-ink);

}



.mt-hero {

  position: relative;

  min-height: min(92vh, 820px);

  display: grid;

  align-items: center;

  overflow: hidden;

  color: #fff;

  background: #06261f;

  /* optical center below sticky header */

  padding-top: 72px;

  box-sizing: border-box;

}



.mt-hero-media {

  position: absolute;

  inset: 0;

  z-index: 0;

}



.mt-hero-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 70% 40%;

  transform: scale(1.04);

  animation: mt-hero-pan 18s ease-in-out infinite alternate;

}



@keyframes mt-hero-pan {

  from { transform: scale(1.04) translate3d(0, 0, 0); }

  to { transform: scale(1.1) translate3d(-1.2%, -1%, 0); }

}



.mt-hero-shade {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(105deg, rgba(3, 22, 18, 0.94) 0%, rgba(3, 22, 18, 0.86) 48%, rgba(3, 22, 18, 0.5) 74%, rgba(3, 22, 18, 0.35) 100%),

    linear-gradient(180deg, rgba(3, 22, 18, 0.5) 0%, rgba(3, 22, 18, 0.28) 48%, rgba(3, 22, 18, 0.62) 100%);

  pointer-events: none;

}



.mt-hero-inner {

  position: relative;

  z-index: 2;

  width: min(1120px, calc(100% - 2rem));

  margin: 0 auto;

  padding: clamp(88px, 12vh, 120px) 0;

}



.mt-brand {

  display: inline-block;

  margin: 0 0 0.85rem;

  font-size: clamp(1.15rem, 2.2vw, 1.45rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: #fff;

  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);

  animation: mt-rise 0.7s ease both;

}



.mt-hero h1 {

  margin: 0;

  max-width: 18ch;

  font-family: var(--mt-display);

  font-size: clamp(2.5rem, 6.2vw, 4.35rem);

  line-height: 1.02;

  letter-spacing: -0.03em;

  font-weight: 700;

  color: #fff;

  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.5);

  animation: mt-rise 0.75s ease 0.08s both;

}



.mt-hero h1 .accent,

.mt-hero h1 .home-hero-accent,

.mt-hero h1 .accent::after,

.mt-hero h1 .home-hero-accent::after {

  color: #fff !important;

  background: none !important;

  -webkit-background-clip: initial !important;

  background-clip: initial !important;

  -webkit-text-fill-color: #fff !important;

  text-decoration: none !important;

  box-shadow: none !important;

}



.mt-hero h1 .accent,

.mt-hero h1 .home-hero-accent {

  border-bottom: 3px solid #5eead4;

  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.55);

}



.mt-hero-copy {

  margin: 1rem 0 0;

  max-width: 34rem;

  font-size: clamp(1.08rem, 1.7vw, 1.25rem);

  line-height: 1.55;

  font-weight: 500;

  color: #e7f7f1;

  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);

  animation: mt-rise 0.75s ease 0.16s both;

}



.mt-hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 1.55rem;

  animation: mt-rise 0.75s ease 0.24s both;

}



.mt-hero-actions .btn-green {

  box-shadow: 0 14px 36px rgba(13, 138, 106, 0.35);

  animation: mt-pulse 2.4s ease-in-out infinite;

}



@keyframes mt-pulse {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-2px); }

}



.mt-hero-actions .btn-outline {

  color: #fff !important;

  border-color: rgba(255, 255, 255, 0.55);

  background: rgba(255, 255, 255, 0.08);

}



.mt-hero-proof {

  margin-top: 1.25rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.65rem 1.1rem;

  color: #eef8f4;

  font-size: 0.98rem;

  font-weight: 700;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);

  animation: mt-rise 0.75s ease 0.32s both;

}



.mt-hero-proof span::before {

  content: "✓ ";

  color: #5eead4;

}



@keyframes mt-rise {

  from { opacity: 0; transform: translateY(18px); }

  to { opacity: 1; transform: translateY(0); }

}



@media (prefers-reduced-motion: reduce) {

  .mt-hero-media img,

  .mt-hero-actions .btn-green,

  .mt-brand,

  .mt-hero h1,

  .mt-hero-copy,

  .mt-hero-actions,

  .mt-hero-proof {

    animation: none !important;

  }

}



.mt-section {

  padding: clamp(56px, 8vw, 96px) 0;

}



.mt-section--paper {

  background:

    radial-gradient(700px 280px at 12% 0%, rgba(13, 138, 106, 0.08), transparent 60%),

    linear-gradient(180deg, #f7fbf9 0%, #eef6f3 100%);

}



.mt-section--ink {

  background:

    radial-gradient(700px 320px at 88% 10%, rgba(13, 138, 106, 0.22), transparent 55%),

    linear-gradient(160deg, #06261f 0%, #0d3a30 100%);

  color: #e8f5f0;

}



.mt-section .section-header {

  max-width: 46rem;

  margin: 0 auto 2.25rem;

  text-align: center;

}



.mt-section .section-kicker,

.mt-section .section-header .section-kicker {

  display: inline-block !important;

  color: var(--mt-teal) !important;

  background: none !important;

  border: 0 !important;

  box-shadow: none !important;

  padding: 0 !important;

  font-family: var(--mt-sans) !important;

  font-weight: 800 !important;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  font-size: 0.8rem !important;

  line-height: 1.3;

}



.mt-section h2,

.mt-section .section-header h2 {

  margin: 0.55rem 0 0.7rem !important;

  font-family: var(--mt-display) !important;

  font-size: clamp(1.85rem, 3.5vw, 2.65rem) !important;

  letter-spacing: -0.02em;

  color: var(--mt-ink) !important;

  line-height: 1.18 !important;

  font-weight: 700 !important;

  -webkit-text-fill-color: var(--mt-ink) !important;

}



.mt-section .lead,

.mt-section .section-header .lead {

  margin: 0 auto !important;

  max-width: 40rem;

  color: var(--mt-muted) !important;

  font-family: var(--mt-sans) !important;

  font-size: 1.12rem !important;

  line-height: 1.65 !important;

  font-weight: 600 !important;

  -webkit-text-fill-color: var(--mt-muted) !important;

}



/* Niveles de cuidado — dedicated block polish */

#planes-mantenimiento.mt-section {

  background:

    radial-gradient(700px 280px at 12% 0%, rgba(11, 122, 94, 0.1), transparent 60%),

    linear-gradient(180deg, #f7fbf9 0%, #eef6f3 100%) !important;

}



#planes-mantenimiento .section-header {

  max-width: 48rem;

  margin-bottom: clamp(2rem, 4vw, 2.75rem);

}



#planes-mantenimiento .section-kicker {

  color: var(--mt-teal) !important;

}



#planes-mantenimiento h2 {

  color: var(--mt-ink) !important;

}



#planes-mantenimiento .lead {

  color: #243f37 !important;

  -webkit-text-fill-color: #243f37 !important;

}



.mt-section--ink .section-kicker {

  color: #7dF0d4 !important;

  -webkit-text-fill-color: #7dF0d4 !important;

}



.mt-section--ink h2,

.mt-section.mt-section--ink h2,

.mt-section.mt-section--ink h3,

#precio-mantenimiento h2 {

  color: #fff !important;

  -webkit-text-fill-color: #fff !important;

}



.mt-section--ink .lead,

.mt-section--ink p,

.mt-section.mt-section--ink .lead,

.mt-section.mt-section--ink p,

#precio-mantenimiento .lead,

#precio-mantenimiento p,

#precio-mantenimiento .mt-price-note,

#precio-mantenimiento .mt-factors strong,

#precio-mantenimiento .mt-factors p {

  color: #e8f7f1 !important;

  -webkit-text-fill-color: #e8f7f1 !important;

}



#precio-mantenimiento .mt-factors strong {

  color: #fff !important;

  -webkit-text-fill-color: #fff !important;

  font-weight: 800;

}



.mt-pricing {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: clamp(24px, 4vw, 48px);

  align-items: start;

  margin-top: clamp(24px, 4vw, 40px);

}



.mt-factors {

  list-style: none;

  margin: 1.2rem 0 0;

  padding: 0;

  display: grid;

  gap: 0.85rem;

}



.mt-factors li {

  display: grid;

  grid-template-columns: 28px 1fr;

  gap: 10px;

  align-items: start;

}



.mt-factors strong {

  display: block;

  color: #fff;

  margin-bottom: 0.15rem;

}



.mt-factors p {

  margin: 0;

  color: #d5ebe3 !important;

  line-height: 1.5;

}



.mt-factor-num {

  width: 28px;

  height: 28px;

  border-radius: 8px;

  display: grid;

  place-items: center;

  background: rgba(94, 234, 212, 0.16);

  color: #5eead4;

  font-size: 0.8rem;

  font-weight: 800;

}



.mt-price-note {

  margin-top: 1.4rem;

  padding-top: 1.2rem;

  border-top: 1px solid rgba(255, 255, 255, 0.14);

  color: #e7f7f1 !important;

  font-weight: 600;

  line-height: 1.55;

}



.mt-plans {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(16px, 2.5vw, 22px);

  margin-top: 0;

  align-items: stretch;

}



.mt-plan {

  display: flex;

  flex-direction: column;

  padding: clamp(1.35rem, 2.5vw, 1.75rem);

  border: 1px solid var(--mt-line);

  border-radius: 18px;

  background: #fff;

  box-shadow: none;

  min-height: 100%;

}



.mt-plan.is-featured {

  border-color: rgba(11, 122, 94, 0.45);

  background: linear-gradient(180deg, #f3fbf8 0%, #fff 42%);

}



.mt-plan .btn {

  margin-top: auto;

  align-self: stretch;

  justify-content: center;

  color: #fff !important;

  background: var(--mt-ink) !important;

  border: 2px solid var(--mt-ink) !important;

  box-shadow: none !important;

}



.mt-plan .btn:hover {

  background: var(--mt-teal) !important;

  border-color: var(--mt-teal) !important;

  color: #fff !important;

}



.mt-plan.is-featured .btn,

.mt-plan .btn-primary {

  background: var(--mt-teal) !important;

  border-color: var(--mt-teal) !important;

  color: #fff !important;

}



.mt-plan .btn-outline {

  background: #fff !important;

  color: var(--mt-ink) !important;

  border: 2px solid var(--mt-ink) !important;

}



.mt-plan .btn-outline:hover {

  background: var(--mt-ink) !important;

  color: #fff !important;

}



.mt-plan-badge {

  display: inline-flex;

  align-items: center;

  min-height: 1.6rem;

  margin: 0 0 0.65rem;

  padding: 0.28rem 0.65rem;

  border-radius: 999px;

  background: var(--mt-teal-soft);

  color: var(--mt-teal) !important;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.07em;

  text-transform: uppercase;

}



.mt-plan:not(.is-featured)::before {

  content: "";

  display: block;

  min-height: 1.6rem;

  margin-bottom: 0.65rem;

}



.mt-plan h3 {

  margin: 0 0 0.4rem;

  font-family: var(--mt-display);

  font-size: 1.55rem;

  color: var(--mt-ink);

  line-height: 1.15;

}



.mt-plan.is-featured h3 {

  color: var(--mt-teal);

}



.mt-plan-price {

  margin: 0 0 0.7rem;

  font-size: 1.02rem;

  font-weight: 800;

  color: var(--mt-ink);

}



.mt-plan > p {

  margin: 0 0 1rem;

  color: var(--mt-slate);

  line-height: 1.55;

  font-weight: 600;

}



.mt-plan ul {

  margin: 0 0 1.35rem;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 0.5rem;

  flex: 1;

}



.mt-plan li {

  position: relative;

  padding-left: 1.15rem;

  color: var(--mt-ink);

  line-height: 1.45;

  font-weight: 600;

}



.mt-plan li::before {

  content: "→";

  position: absolute;

  left: 0;

  color: var(--mt-teal);

  font-weight: 800;

}



.mt-risk-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 22px 28px;

  margin-top: clamp(28px, 4vw, 40px);

}



.mt-risk {

  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;

}



.mt-risk-code {

  display: inline-block;

  margin-bottom: 0.5rem;

  color: var(--mt-teal);

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.06em;

}



.mt-risk h3 {

  margin: 0 0 0.4rem;

  font-size: 1.12rem;

  color: var(--mt-ink);

}



.mt-risk p {

  margin: 0;

  color: var(--mt-slate);

  line-height: 1.55;

  font-weight: 500;

}



.mt-process {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;

  margin-top: clamp(28px, 4vw, 44px);

  counter-reset: mtstep;

}



.mt-step {

  border: 0;

  background: transparent;

  box-shadow: none;

  padding: 0;

}



.mt-step::before {

  counter-increment: mtstep;

  content: counter(mtstep, decimal-leading-zero);

  display: block;

  margin-bottom: 0.7rem;

  font-size: 0.82rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  color: var(--mt-teal);

}



.mt-step h3 {

  margin: 0 0 0.4rem;

  font-size: 1.08rem;

  color: var(--mt-ink);

}



.mt-step p {

  margin: 0;

  color: var(--mt-slate);

  line-height: 1.55;

  font-weight: 500;

}



.mt-proof {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: clamp(24px, 4vw, 48px);

  align-items: center;

  margin-top: clamp(24px, 4vw, 40px);

}



.mt-proof-media img {

  width: 100%;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  display: block;

}



.mt-stores {

  list-style: none;

  margin: 1.3rem 0 0;

  padding: 0;

  display: grid;

  gap: 1rem;

}



.mt-stores li strong {

  display: block;

  color: #fff;

  margin-bottom: 0.2rem;

}



.mt-stores li p {

  margin: 0;

  color: #d5ebe3 !important;

  line-height: 1.5;

}



.mt-faq-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 22px 36px;

  margin-top: clamp(24px, 4vw, 40px);

}



.mt-faq-card {

  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;

}



.mt-faq-card h3 {

  margin: 0 0 0.45rem;

  font-size: 1.08rem;

  color: var(--mt-ink);

}



.mt-faq-card p {

  margin: 0;

  color: var(--mt-slate);

  line-height: 1.55;

  font-weight: 500;

}



.mt-final {

  position: relative;

  overflow: hidden;

  padding: clamp(56px, 8vw, 88px) 0;

  background:

    radial-gradient(700px 280px at 20% 0%, rgba(13, 138, 106, 0.22), transparent 55%),

    linear-gradient(150deg, #06261f 0%, #0d3a30 100%);

  color: #fff;

}



.mt-final-inner {

  display: grid;

  grid-template-columns: 1.25fr 0.75fr;

  gap: 28px;

  align-items: center;

}



.mt-final .section-kicker {

  color: #5eead4;

}



.mt-final h2 {

  margin: 0.35em 0 0.5em;

  font-family: var(--mt-display);

  font-size: clamp(1.9rem, 3.5vw, 2.8rem);

  color: #fff;

  letter-spacing: -0.02em;

}



.mt-final p {

  margin: 0;

  color: #d5ebe3;

  font-size: 1.08rem;

  line-height: 1.6;

  max-width: 36rem;

}



.mt-final-actions {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.mt-final-actions .btn {

  width: 100%;

  justify-content: center;

}



.mt-final .btn-outline {

  color: #fff !important;

  border-color: rgba(255, 255, 255, 0.55);

  background: rgba(255, 255, 255, 0.08);

}



.mt-related {

  padding: 48px 0 72px;

  background: #f7fbf9;

}



.mt-related h2 {

  font-family: var(--mt-display) !important;

  color: var(--mt-ink) !important;

  font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;

}



.mt-related-list {

  list-style: none;

  margin: 1.5rem 0 0;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  gap: 12px 18px;

  justify-content: center;

}



.mt-related-list a {

  color: var(--mt-slate);

  font-weight: 700;

  text-decoration: none;

  border-bottom: 2px solid rgba(13, 138, 106, 0.35);

}



.mt-related-list a:hover {

  color: var(--mt-teal);

}



@media (max-width: 980px) {

  .mt-pricing,

  .mt-proof,

  .mt-final-inner {

    grid-template-columns: 1fr;

  }



  .mt-plans,

  .mt-risk-grid {

    grid-template-columns: 1fr;

  }



  .mt-process {

    grid-template-columns: 1fr 1fr;

  }



  .mt-faq-grid {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 640px) {

  .mt-process {

    grid-template-columns: 1fr;

  }



  .mt-hero-actions .btn {

    width: 100%;

    justify-content: center;

  }

}