/* =====================================================================
   Página "Servicio de Manitas"
   ===================================================================== */

/* ---------- Cabecera de sección centrada (reutilizable) ---------- */
.fdq-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fdq-space-sm);
  margin-bottom: var(--fdq-space-xl);
  text-align: center;
}
.fdq-section-head__title { margin: 0; color: var(--fdq-primary-container); }
.fdq-section-head__subtitle {
  margin: 0;
  max-width: 42rem;
  font-size: var(--fdq-fs-body-lg);
  color: var(--fdq-on-surface-variant);
}
.fdq-section-head__bar {
  width: 64px;
  min-height: 0;
  height: 6px;
  border-radius: var(--fdq-radius-pill);
  background-color: var(--fdq-secondary);
}

/* ---------- Hero ---------- */
.manitas-hero {
  position: relative;
  min-height: 616px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image:
    url("../../images/manitas/manitas-domicilio.webp");
  background-size: cover;
  background-position: center;
}
.manitas-hero__inner {
  width: 100%;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.manitas-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--fdq-space-md);
  max-width: 672px;
}
.manitas-hero__badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 6px var(--fdq-space-sm);
  background-color: var(--fdq-secondary-container);
  color: var(--fdq-primary);
  border-radius: var(--fdq-radius-sm);
  font-size: 14px;
  font-weight: 700;
}
.manitas-hero__title { margin: 0; color: #fff; }
.manitas-hero__lead { margin: 0; font-size: var(--fdq-fs-body-lg); color: rgba(255, 255, 255, 0.90); }
.manitas-hero__cta { margin-top: var(--fdq-space-xs); gap: var(--fdq-space-sm); }

/* ---------- Servicios ---------- */
.manitas-services { padding-block: 80px; }
.manitas-services__inner {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.manitas-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-md);
}
.manitas-services__grid > * { margin-block: 0; }

.manitas-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--fdq-space-lg);
  background-color: var(--fdq-surface-container-lowest);
  border: 1px solid var(--fdq-slate-200);
  border-radius: var(--fdq-radius-lg);
  box-shadow: var(--fdq-shadow-sm);
  transition: box-shadow var(--fdq-duration-base) var(--fdq-ease-out);
}
.manitas-service-card:hover { box-shadow: var(--fdq-shadow-md); }
.manitas-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 var(--fdq-space-md);
  background-color: var(--fdq-slate-100);
  border-radius: var(--fdq-radius-md);
  transition: background-color var(--fdq-duration-base) var(--fdq-ease-out);
}
.manitas-service-card__icon .material-symbols-outlined {
  color: var(--fdq-primary-container);
  font-size: 30px;
  transition: color var(--fdq-duration-base) var(--fdq-ease-out);
}
.manitas-service-card:hover .manitas-service-card__icon { background-color: var(--fdq-primary-container); }
.manitas-service-card:hover .manitas-service-card__icon .material-symbols-outlined { color: var(--fdq-secondary-container); }
/* Iconos SVG de las tarjetas (sustituyen a los material symbols) */
.manitas-service-card__icon .fdq-icon-img { width: 30px; height: 30px; }
/* Al pasar el ratón el círculo se oscurece; el icono (azul oscuro) pasa a blanco.
   La tarjeta destacada ya trae el SVG en blanco, así que se excluye. */
.manitas-service-card:not(.manitas-service-card--featured):hover .manitas-service-card__icon .fdq-icon-img {
  filter: brightness(0) invert(1);
}
.manitas-service-card__title {
  margin: 0 0 var(--fdq-space-xs);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fdq-primary-container);
}
.manitas-service-card__text {
  flex-grow: 1;
  margin: 0 0 var(--fdq-space-md);
  color: var(--fdq-on-surface-variant);
}
.manitas-service-card__link { margin: 0; }
.manitas-service-card__link a {
  display: inline-flex;
  align-items: center;
  gap: var(--fdq-space-base);
  color: var(--fdq-secondary);
  font-weight: 700;
}
.manitas-service-card__link a:hover { color: var(--fdq-accent); text-decoration: underline; }
.manitas-service-card__link .material-symbols-outlined { font-size: 18px; transition: transform var(--fdq-duration-base) var(--fdq-ease-out); }
.manitas-service-card__link a:hover .material-symbols-outlined { transform: translateX(4px); }

/* Tarjeta destacada (Reformas) */
.manitas-service-card--featured {
  position: relative;
  overflow: hidden;
  border: 0;
  background-color: var(--fdq-primary);
  background-image: linear-gradient(to top, var(--fdq-primary), rgba(4, 22, 50, 0.9) 50%, rgba(4, 22, 50, 0.6));
  box-shadow: var(--fdq-shadow-lg);
}
.manitas-service-card--featured .manitas-service-card__icon,
.manitas-service-card--featured:hover .manitas-service-card__icon {
  background-color: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.30);
}
.manitas-service-card--featured .manitas-service-card__icon .material-symbols-outlined,
.manitas-service-card--featured:hover .manitas-service-card__icon .material-symbols-outlined { color: #fff; }
.manitas-service-card--featured .manitas-service-card__title { color: #fff; }
.manitas-service-card--featured .manitas-service-card__text { color: rgba(255, 255, 255, 0.90); }
.manitas-service-card--featured .manitas-service-card__link a { color: var(--fdq-secondary-container); text-decoration: underline; }
.manitas-service-card--featured .manitas-service-card__link a:hover { color: #fff; }

/* ---------- B2B ---------- */
.manitas-b2b { padding-block: 80px; }
.manitas-b2b__grid {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  gap: var(--fdq-space-xl);
}
.manitas-b2b__media {
  position: relative;
  aspect-ratio: 4 / 3;
}
.manitas-b2b__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px; /* no usamos overflow:hidden para no recortar el badge externo */
}
.manitas-b2b__badge {
  display: none;
  position: absolute;
  right: -24px;
  bottom: -24px;
  padding: var(--fdq-space-md);
  background-color: var(--fdq-secondary);
  border-radius: var(--fdq-radius-sm);
  box-shadow: var(--fdq-shadow-lg);
}
.manitas-b2b__badge-title { margin: 0; font-family: var(--fdq-font-heading); font-size: 20px; font-weight: 600; color: #fff; }
.manitas-b2b__badge-text { margin: 0; font-size: 14px; font-weight: 500; color: #fff; }
.manitas-b2b__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fdq-space-md);
}
.manitas-b2b__title { margin: 0; color: var(--fdq-primary); }
.manitas-b2b__text { margin: 0; font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }
.manitas-b2b__list { display: flex; flex-direction: column; gap: var(--fdq-space-sm); }
.manitas-b2b__item {
  display: flex;
  align-items: flex-start;
  gap: var(--fdq-space-xs);
  margin: 0;
  font-weight: 700;
  color: var(--fdq-on-surface);
}
.manitas-b2b__item .material-symbols-outlined { color: var(--fdq-secondary); flex-shrink: 0; }
.manitas-b2b__item .fdq-icon-img { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.manitas-b2b__cta { margin-top: var(--fdq-space-xs); }

/* ---------- Tarifas (bento) ---------- */
.manitas-pricing { padding-block: 96px; }
.manitas-pricing__inner {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.manitas-pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-md);
}
.manitas-pricing__grid > * { margin-block: 0; }

.manitas-price {
  padding: 40px;
  border-radius: 2rem;
  overflow: hidden;
}
.manitas-price__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 1rem;
  flex-shrink: 0;
}
.manitas-price__icon .material-symbols-outlined { font-size: 36px; }
.manitas-price__icon .fdq-icon-img { width: 36px; height: 36px; }
/* En "Cero Costes Ocultos" el círculo se vuelve cian al hover; el icono pasa a blanco */
.manitas-price--light:hover .manitas-price__icon .fdq-icon-img { filter: brightness(0) invert(1); }
.manitas-price__title { margin: 0; font-family: var(--fdq-font-heading); font-size: 24px; font-weight: 600; }
.manitas-price__text { margin: 0; }
.manitas-price__body { display: flex; flex-direction: column; gap: var(--fdq-space-xs); }

/* Card grande */
.manitas-price--lg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background-color: var(--fdq-surface-container-lowest);
  border: 1px solid var(--fdq-slate-200);
  box-shadow: var(--fdq-shadow-sm);
  transition: box-shadow var(--fdq-duration-base) var(--fdq-ease-out);
}
.manitas-price--lg:hover { box-shadow: var(--fdq-shadow-lg); }
.manitas-price--lg .manitas-price__icon { margin-bottom: var(--fdq-space-lg); background-color: rgba(0, 119, 166, 0.10); }
.manitas-price--lg .manitas-price__icon .material-symbols-outlined { color: var(--fdq-secondary); }
.manitas-price__title--lg { font-size: 30px; margin: 0 0 var(--fdq-space-md); color: var(--fdq-primary-container); }
.manitas-price--lg .manitas-price__text { max-width: 24rem; font-size: var(--fdq-fs-body-lg); color: var(--fdq-on-surface-variant); }
.manitas-price__foot {
  display: flex;
  align-items: center;
  gap: var(--fdq-space-xs);
  margin: 0;
  color: var(--fdq-secondary);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Cards medianas */
.manitas-price--dark,
.manitas-price--light {
  display: flex;
  flex-direction: column;
  gap: var(--fdq-space-md);
}
.manitas-price--dark { background-color: var(--fdq-primary-container); }
.manitas-price--dark .manitas-price__icon { background-color: rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.30); }
.manitas-price--dark .manitas-price__icon .material-symbols-outlined { color: var(--fdq-secondary-container); }
.manitas-price--dark .manitas-price__title { color: #fff; }
.manitas-price--dark .manitas-price__text { color: rgba(255, 255, 255, 0.90); }

.manitas-price--light {
  background-color: #f8fafc;
  border: 1px solid var(--fdq-slate-200);
  transition: background-color var(--fdq-duration-base) var(--fdq-ease-out), box-shadow var(--fdq-duration-base) var(--fdq-ease-out);
}
.manitas-price--light:hover { background-color: #fff; box-shadow: var(--fdq-shadow-md); }
.manitas-price--light .manitas-price__icon { background-color: rgba(0, 119, 166, 0.10); transition: background-color var(--fdq-duration-base) var(--fdq-ease-out); }
.manitas-price--light .manitas-price__icon .material-symbols-outlined { color: var(--fdq-secondary); transition: color var(--fdq-duration-base) var(--fdq-ease-out); }
.manitas-price--light:hover .manitas-price__icon { background-color: var(--fdq-secondary); }
.manitas-price--light:hover .manitas-price__icon .material-symbols-outlined { color: #fff; }
.manitas-price--light .manitas-price__title { color: var(--fdq-primary-container); }
.manitas-price--light .manitas-price__text { color: var(--fdq-on-surface-variant); }

/* ---------- CTA ---------- */
.manitas-cta { position: relative; overflow: hidden; padding-block: 80px; }
.manitas-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fdq-space-md);
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  text-align: center;
}
.manitas-cta__title { margin: 0; color: #fff; }
.manitas-cta__text { margin: 0; max-width: 42rem; font-size: var(--fdq-fs-body-lg); color: rgba(255, 255, 255, 0.90); }
.manitas-cta__buttons { margin-top: var(--fdq-space-md); }

/* ---------- Logros ---------- */
.manitas-ach { padding-block: var(--fdq-space-lg); border-bottom: 1px solid var(--fdq-slate-200); }
.manitas-ach__inner {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  gap: var(--fdq-space-lg);
}
.manitas-ach__item { gap: var(--fdq-space-sm); }
.manitas-ach__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;
  background-color: var(--fdq-slate-100);
  border-radius: var(--fdq-radius-pill);
  flex-shrink: 0;
}
.manitas-ach__icon .material-symbols-outlined { color: var(--fdq-secondary); font-size: 36px; }
.manitas-ach__icon .fdq-icon-img { width: 36px; height: 36px; }
.manitas-ach__meta > * { margin: 0; }
.manitas-ach__name { font-size: 20px; font-weight: 700; line-height: var(--fdq-lh-tight); color: var(--fdq-primary-container); }
.manitas-ach__sub { font-size: 14px; font-weight: 500; color: var(--fdq-on-surface-variant); }
.manitas-ach__rule { width: 96px; height: 1px; min-height: 0; background-color: #cbd5e1; }
.manitas-ach__text { margin: 0; max-width: 36rem; font-size: 20px; font-weight: 600; color: var(--fdq-primary-container); }
.manitas-ach__text strong { color: var(--fdq-secondary); font-weight: 900; }

/* ---------- Cobertura ---------- */
.manitas-coverage { padding-block: 64px; border-block: 1px solid var(--fdq-slate-200); }
.manitas-coverage__inner {
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  gap: var(--fdq-space-lg);
}
.manitas-coverage__content { width: 100%; }
.manitas-coverage__title { margin: 0 0 var(--fdq-space-sm); font-size: var(--fdq-fs-h3); color: var(--fdq-primary); }
.manitas-coverage__text { margin: 0 0 var(--fdq-space-md); color: var(--fdq-on-surface-variant); }
.manitas-coverage__tags { gap: var(--fdq-space-xs); }
.manitas-coverage__tag {
  margin: 0;
  padding: var(--fdq-space-xs) var(--fdq-space-sm);
  background-color: #fff;
  border: 1px solid #cbd5e1;
  border-radius: var(--fdq-radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--fdq-primary);
}
.manitas-coverage__media {
  width: 100%;
  height: 192px;
  background-color: var(--fdq-surface-dim);
  border-radius: var(--fdq-radius-md);
  border: 1px solid var(--fdq-slate-200);
  overflow: hidden;
}
.manitas-coverage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .manitas-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .manitas-b2b__badge { display: block; }
  .manitas-pricing__grid { grid-template-columns: 1fr 1fr; }
  .manitas-price--lg { grid-column: 1; grid-row: 1 / span 2; }
  .manitas-price--dark { grid-column: 2; grid-row: 1; }
  .manitas-price--light { grid-column: 2; grid-row: 2; }
  .manitas-price--dark,
  .manitas-price--light { flex-direction: row; align-items: center; gap: 32px; }
  .manitas-coverage__content { width: 50%; }
  .manitas-coverage__media { width: 33.333%; }
}
@media (min-width: 1024px) {
  .manitas-services__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .manitas-ach__rule { display: none; }
  .manitas-ach__text { text-align: center; }
}
