/* =========================================================
   DESIGN & REMODELING
   CONFIGURACIÓN GENERAL DE LA PÁGINA
========================================================= */

.efp-design-remodeling{
  --hero-notch-desktop:88px;
  --hero-notch-desktop-neg:-88px;
  --hero-notch-mobile:58px;
  --hero-notch-mobile-neg:-58px;

  --efp-gold:#d5aa5b;
  --efp-gold-light:#f0ca7c;
  --efp-card-border:rgba(213,170,91,.38);
  --efp-card-border-inner:rgba(213,170,91,.24);

  background:#050505;
  overflow:hidden;
}


/* =========================================================
   HERO
   Mantiene el tamaño y la imagen principal
========================================================= */

.efp-design-remodeling .efp-hero{
  position:relative;
  z-index:3;

  min-height:78vh;
  padding:120px 0 170px;

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  overflow:hidden;
}


/* =========================================================
   OVERLAY DEL HERO
   Oscurece ligeramente la fotografía sin ocultarla
========================================================= */

.efp-design-remodeling .efp-hero__overlay{
  position:absolute;
  inset:0;
  z-index:0;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.24) 0%,
    rgba(0,0,0,.18) 40%,
    rgba(0,0,0,.32) 100%
  );

  pointer-events:none;
}

/* =========================================================
   CONTENIDO DEL HERO
   Mantiene título, botones y badges sobre la fotografía
========================================================= */

.efp-design-remodeling .efp-hero__inner{
  position:relative;
  z-index:2;
  text-align:center;
}


/* =========================================================
   SOMBRA SUTIL DEL TÍTULO PRINCIPAL
   Mejora la lectura sin crear un contorno exagerado
========================================================= */

.efp-design-remodeling .efp-hero__title{
  text-shadow:
    0 2px 2px rgba(0,0,0,.72),
    0 0 7px rgba(0,0,0,.34);
}


/* =========================================================
   SOMBRA SUTIL DEL SUBTÍTULO
   Resalta el texto pequeño sobre las zonas claras
========================================================= */

.efp-design-remodeling .efp-hero__meta{
  text-shadow:
    0 1px 2px rgba(0,0,0,.82),
    0 0 5px rgba(0,0,0,.30);
}


/* =========================================================
   SOMBRA DEL TEXTO DE LOS BOTONES
   Mantiene las letras legibles dentro del borde dorado
========================================================= */

.efp-design-remodeling .efp-hero__actions .efp-btn{
  text-shadow:
    0 1px 2px rgba(0,0,0,.78);
}


/* =========================================================
   SOMBRA DE LAS ESTRELLAS Y TEXTOS DE CONFIANZA
========================================================= */

.efp-design-remodeling .efp-trust--hero .efp-trust__stars,
.efp-design-remodeling .efp-trust--hero .efp-trust__title{
  text-shadow:
    0 1px 2px rgba(0,0,0,.88),
    0 0 4px rgba(0,0,0,.28);
}


/* =========================================================
   SOMBRA DEL ÍCONO DE UBICACIÓN
========================================================= */

.efp-design-remodeling .efp-trust--hero .efp-trust__pin svg{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.85));
}

/* =========================================================
   PUNTA INFERIOR DEL HERO
   Cubre las esquinas y elimina la costura de 1 píxel
========================================================= */

.efp-design-remodeling .efp-hero::after{
  content:"";

  position:absolute;
  left:0;
  right:0;

  /*
   * Se extiende 2px por debajo del hero para impedir
   * que aparezca una línea de la fotografía.
   */
  bottom:-2px;

  width:100%;

  /*
   * Se agregan 3px para compensar el desplazamiento inferior.
   */
  height:calc(var(--hero-notch-desktop) + 3px);

  background:#050505;

  clip-path:polygon(
    0 0,
    50% 100%,
    100% 0,
    100% 100%,
    0 100%
  );

  z-index:1;
  pointer-events:none;
}

/* =========================================================
   SECCIÓN DE SERVICIOS
   Empata la sección negra con la punta del hero
========================================================= */

.efp-design-remodeling .efp-section--dark{
  position:relative;
  z-index:1;

  margin-top:var(--hero-notch-desktop-neg);

  padding-top:calc(110px + var(--hero-notch-desktop));
  padding-bottom:90px;

  background:#050505;
}


/* =========================================================
   ENCABEZADO DE SERVICIOS
   Centra el título y el texto introductorio
========================================================= */

.efp-design-remodeling .efp-section--dark .efp-h2{
  margin:0 auto 14px;
  text-align:center;
}

.efp-design-remodeling .efp-section--dark > .efp-container > .efp-sub{
  max-width:850px;
  margin:0 auto;

  text-align:center;
  line-height:1.55;
}


/* =========================================================
   CUADRÍCULA DE TARJETAS
   Organiza las tres tarjetas en columnas iguales
========================================================= */

.efp-design-remodeling .efp-cards{
  width:100%;
  max-width:1100px;

  margin:42px auto 0;

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;

  align-items:stretch;
}


/* =========================================================
   TARJETA COMPLETA
   Crea fondo oscuro, altura uniforme y marcos dorados

   No se usan pseudo-elementos sobre la tarjeta para evitar
   que puedan colocarse encima de las fotografías.
========================================================= */

.efp-design-remodeling .efp-card{
  position:relative;

  min-width:0;
  min-height:460px;

  padding:16px;

  display:flex;
  flex-direction:column;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,0) 52%
    ),
    #171717;

  border:1px solid var(--efp-card-border);

  box-shadow:
    inset 0 0 0 7px #171717,
    inset 0 0 0 8px var(--efp-card-border-inner),
    inset 0 0 0 14px #171717,
    inset 0 0 0 15px rgba(213,170,91,.16);

  box-sizing:border-box;
  overflow:hidden;
}


/* =========================================================
   IMÁGENES DE LAS TARJETAS

   IMPORTANTE:
   - No toca background-image.
   - Conserva la imagen enviada por el PHP.
   - Todas las áreas tienen exactamente 230px.
   - La fotografía se muestra completa sin deformarse.
========================================================= */

.efp-design-remodeling .efp-card__img{
  width:100% !important;

  height:230px !important;
  min-height:230px !important;
  max-height:230px !important;

  flex:0 0 230px !important;
  display:block !important;

  margin:0;

  background-color:#050505;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;

  border:1px solid rgba(213,170,91,.52);

  box-sizing:border-box;
  overflow:hidden !important;
}


/* =========================================================
   ELIMINACIÓN DE PLACEHOLDERS ANTIGUOS

   Evita que alguna regla heredada muestre nuevamente:
   IMAGE COMING SOON
========================================================= */

.efp-design-remodeling .efp-card__img::before,
.efp-design-remodeling .efp-card__img::after,
.efp-design-remodeling .efp-card--noimg .efp-card__img::before,
.efp-design-remodeling .efp-card--noimg .efp-card__img::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   CUERPO DE LA TARJETA
   Centra título, ornamento y descripción
========================================================= */

.efp-design-remodeling .efp-card__body{
  width:100%;
  flex:1;

  padding:25px 18px 22px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
  box-sizing:border-box;
}


/* =========================================================
   TÍTULO DE LA TARJETA
   Mantiene los tres títulos alineados
========================================================= */

.efp-design-remodeling .efp-card__title{
  width:100%;
  min-height:54px;

  margin:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--efp-gold-light);

  font-family:Georgia, "Times New Roman", serif;
  font-size:20px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.01em;

  text-align:center;
  text-transform:uppercase;
}


/* =========================================================
   ORNAMENTO DORADO
   Crea las líneas laterales y el diamante central
========================================================= */

.efp-design-remodeling .efp-card__ornament{
  width:126px;
  height:20px;

  margin:8px auto 12px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  flex:0 0 auto;
}


/* Líneas laterales */

.efp-design-remodeling .efp-card__ornament::before,
.efp-design-remodeling .efp-card__ornament::after{
  content:"";

  width:42px;
  height:1px;

  display:block;
  background:rgba(213,170,91,.65);
}


/* Diamante central */

.efp-design-remodeling .efp-card__ornament span{
  width:7px;
  height:7px;

  display:block;
  flex:0 0 7px;

  background:var(--efp-gold);
  transform:rotate(45deg);
}


/* =========================================================
   DESCRIPCIÓN DE LA TARJETA
   Mantiene los textos centrados y alineados
========================================================= */

.efp-design-remodeling .efp-card__desc{
  width:100%;
  max-width:285px;
  min-height:72px;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;

  font-family:Georgia, "Times New Roman", serif;
  font-size:16px;
  line-height:1.5;

  text-align:center;
}


/* =========================================================
   BOTÓN DE SERVICIOS
   Centra START YOUR PROJECT debajo de las tarjetas
========================================================= */

.efp-design-remodeling .efp-services-cta{
  width:100%;
  margin:32px auto 0;

  display:flex;
  align-items:center;
  justify-content:center;
}


/* =========================================================
   TABLET
   Reduce el hero y muestra dos tarjetas por fila
========================================================= */

@media (max-width:991px){

  .efp-design-remodeling .efp-hero{
    min-height:72vh;
    padding:105px 0 140px;
  }

  .efp-design-remodeling .efp-hero::after{
    height:var(--hero-notch-mobile);
  }

  .efp-design-remodeling .efp-section--dark{
    margin-top:var(--hero-notch-mobile-neg);

    padding-top:calc(90px + var(--hero-notch-mobile));
    padding-bottom:75px;
  }

  .efp-design-remodeling .efp-cards{
    max-width:760px;

    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
  }

  .efp-design-remodeling .efp-card__img{
    height:230px !important;
    min-height:230px !important;
    max-height:230px !important;
    flex-basis:230px !important;
  }
}


/* =========================================================
   MÓVIL
   Coloca una tarjeta por fila
========================================================= */

@media (max-width:767px){

  .efp-design-remodeling .efp-hero{
    min-height:66vh;
    padding:95px 0 120px;
  }

  .efp-design-remodeling .efp-section--dark{
    padding-left:16px;
    padding-right:16px;
  }

  .efp-design-remodeling .efp-cards{
    max-width:390px;

    grid-template-columns:1fr;
    gap:22px;
  }

  .efp-design-remodeling .efp-card{
    min-height:0;
  }

  .efp-design-remodeling .efp-card__img{
    height:250px !important;
    min-height:250px !important;
    max-height:250px !important;
    flex-basis:250px !important;
  }

  .efp-design-remodeling .efp-card__body{
    padding:25px 18px 24px;
  }

  .efp-design-remodeling .efp-card__title{
    min-height:0;
    font-size:19px;
  }

  .efp-design-remodeling .efp-card__desc{
    min-height:0;
    font-size:15px;
  }
}