/* =============================================================================
   DELCORP — HOJA DE ESTILOS DE LA PORTADA, EL SLIDER Y EL FOOTER
   -----------------------------------------------------------------------------
   Todo va con prefijo .dcp- para no chocar con plantilla.css, bootstrap ni nada
   de lo que ya tenías. Si quieres cambiar colores o espaciado, se hace en el
   bloque :root de abajo y se aplica a todo.
   ============================================================================= */

:root {
  /* --- Marca ------------------------------------------------------------- */
  --dcp-verde:        #0B753C;   /* verde corporativo */
  --dcp-verde-osc:    #075A2E;   /* hover */
  --dcp-verde-vivo:   #0E8A47;   /* verde más luminoso para degradados */
  --dcp-verde-suave:  #E6F2EB;   /* fondos tenues */
  --dcp-verde-borde:  #C5E1D2;

  /* --- Neutros: grises con un punto de verde, no grises planos ---------- */
  --dcp-tinta:        #121915;
  --dcp-tinta-2:      #3C4841;
  --dcp-apagado:      #6B7A72;
  --dcp-linea:        #DDE5E0;
  --dcp-linea-fuerte: #C3CFC8;
  --dcp-papel:        #FFFFFF;
  --dcp-fondo:        #F5F8F6;
  --dcp-fondo-2:      #EDF3EF;

  /* --- Acento cálido: el kraft del papel, usado con cuentagotas --------- */
  --dcp-kraft:        #C08A3E;
  --dcp-kraft-suave:  #FAF3E7;

  --dcp-sombra:       0 1px 2px rgba(18,25,21,.04), 0 12px 28px -18px rgba(18,25,21,.28);
  --dcp-sombra-alta:  0 2px 4px rgba(18,25,21,.05), 0 28px 60px -32px rgba(18,25,21,.42);
  --dcp-radio:        14px;
  --dcp-radio-sm:     9px;
  --dcp-ease:         cubic-bezier(.4, 0, .2, 1);

  --dcp-ancho:        1240px;
}

/* Tipografía: Ubuntu ya la carga tu header. Oswald para titulares. */
.dcp *, .dcp *::before, .dcp *::after { box-sizing: border-box; }

.dcp {
  font-family: "Ubuntu", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--dcp-tinta);
  line-height: 1.65;
  font-size: 16px;
}
.dcp img { max-width: 100%; height: auto; display: block; }
.dcp a { color: var(--dcp-verde); text-decoration: none; }

.dcp-in { max-width: var(--dcp-ancho); margin-inline: auto; padding-inline: 20px; }

.dcp h1, .dcp h2, .dcp h3, .dcp h4 {
  font-family: "Oswald", "Ubuntu Condensed", "Ubuntu", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
.dcp h2 { font-size: clamp(26px, 3.6vw, 40px); text-transform: uppercase; letter-spacing: .01em; }
.dcp h3 { font-size: clamp(18px, 2vw, 22px); }
.dcp p  { margin: 0 0 16px; }
.dcp p:last-child { margin-bottom: 0; }

/* Etiqueta de sección */
.dcp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Ubuntu", Arial, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dcp-verde); margin-bottom: 12px;
}
.dcp-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--dcp-verde); flex: 0 0 auto;
}

.dcp-sec { padding-block: clamp(52px, 7vw, 92px); }
.dcp-sec--gris { background: var(--dcp-fondo); }
.dcp-sec--verde { background: var(--dcp-tinta); color: #E8F0EB; }
.dcp-sec--verde h2, .dcp-sec--verde h3 { color: #fff; }

.dcp-head { max-width: 62ch; margin-bottom: 38px; }
.dcp-head p { color: var(--dcp-tinta-2); font-size: 17px; margin-top: 14px; }
.dcp-head--centro { margin-inline: auto; text-align: center; }
.dcp-head--centro .dcp-eyebrow::before { display: none; }

/* --- Botones ------------------------------------------------------------ */
.dcp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Ubuntu", Arial, sans-serif;
  font-size: 15.5px; font-weight: 700; line-height: 1;
  padding: 16px 30px; border-radius: var(--dcp-radio-sm);
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: background-color .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.dcp-btn:active { transform: translateY(1px); }
.dcp-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.dcp a.dcp-btn--primario, .dcp .dcp-btn--primario {
  background: var(--dcp-verde); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(11,117,60,.7);
}
.dcp a.dcp-btn--primario:hover, .dcp .dcp-btn--primario:hover { background: var(--dcp-verde-osc); color: #fff; }

.dcp a.dcp-btn--linea, .dcp .dcp-btn--linea {
  background: transparent; color: var(--dcp-tinta); border-color: var(--dcp-linea-fuerte);
}
.dcp a.dcp-btn--linea:hover, .dcp .dcp-btn--linea:hover { border-color: var(--dcp-verde); color: var(--dcp-verde); }

.dcp a.dcp-btn--claro, .dcp .dcp-btn--claro { background: #fff; color: var(--dcp-tinta); }
.dcp a.dcp-btn--claro:hover, .dcp .dcp-btn--claro:hover { background: var(--dcp-verde-suave); color: var(--dcp-verde-osc); }

.dcp a.dcp-btn--fantasma, .dcp .dcp-btn--fantasma {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.34);
}
.dcp a.dcp-btn--fantasma:hover, .dcp .dcp-btn--fantasma:hover { background: rgba(255,255,255,.1); color: #fff; }

.dcp-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* =============================================================================
   1. SLIDER
   ============================================================================= */
.dcp-hero { background: var(--dcp-tinta); position: relative; overflow: hidden; }
.dcp-hero::after {   /* franja verde diagonal, guiño al logo */
  content: ""; position: absolute; inset: auto -10% -60% 55%; height: 220px;
  background: linear-gradient(100deg, rgba(11,117,60,.28), transparent 70%);
  transform: rotate(-6deg); pointer-events: none;
}

.dcp-slider { position: relative; }
.dcp-slider__pista { position: relative; }

.dcp-slide {
  display: none;
  animation: dcp-aparece .6s var(--dcp-ease);
}
.dcp-slide.is-activa { display: block; }
@keyframes dcp-aparece { from { opacity: 0 } to { opacity: 1 } }

.dcp-slide__link { display: block; }
.dcp-slide__img {
  width: 100%; height: auto; display: block;
  /* En pantalla ancha el banner se ve completo: ya trae su propio diseño. */
}
/* En celular un banner de 3:1 queda de 130 px de alto y su texto no se lee.
   Ahí lo recortamos hacia los sacos y el mensaje lo lleva el pie del slide. */
@media (max-width: 760px) {
  .dcp-slide__img {
    aspect-ratio: 5 / 4; height: auto; object-fit: cover; object-position: 82% 50%;
    border-radius: 0 0 var(--dcp-radio-sm) var(--dcp-radio-sm);
  }
}
@media (max-width: 480px) {
  .dcp-slide__img { aspect-ratio: 1 / 1; }
}

/* Pie del slide: da contexto en móvil, donde el texto del banner queda chico */
.dcp-slide__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; padding: 20px 0 4px;
}
@media (max-width: 760px) {
  .dcp-slide__pie { padding-top: 22px; }
  .dcp-slide__pie .dcp-acciones { width: 100%; }
  .dcp-slide__pie .dcp-btn { flex: 1 1 150px; }
}
.dcp-slide__txt { min-width: 0; }
.dcp-slide__txt h2 {
  font-size: clamp(20px, 3vw, 28px); color: #fff; text-transform: none;
  letter-spacing: -.01em; margin-bottom: 4px;
}
.dcp-slide__txt p { color: #AFC4B8; font-size: 15px; margin: 0; }

/* Flechas */
.dcp-slider__flecha {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255,255,255,.9); border: 0; border-radius: 50%;
  color: var(--dcp-tinta); cursor: pointer;
  box-shadow: var(--dcp-sombra); transition: background-color .18s, scale .18s;
}
.dcp-slider__flecha:hover { background: #fff; scale: 1.06; }
.dcp-slider__flecha svg { width: 20px; height: 20px; }
.dcp-slider__flecha--prev { left: 18px; }
.dcp-slider__flecha--next { right: 18px; }
@media (max-width: 760px) { .dcp-slider__flecha { display: none; } }

/* Puntos */
.dcp-slider__puntos {
  display: flex; justify-content: center; gap: 9px;
  padding: 4px 0 26px;
}
.dcp-slider__punto {
  width: 34px; height: 4px; padding: 0; border: 0; border-radius: 3px;
  background: rgba(255,255,255,.28); cursor: pointer; transition: background-color .2s, width .2s;
}
.dcp-slider__punto[aria-selected="true"] { background: var(--dcp-verde); width: 52px; }
.dcp-slider__punto:hover { background: rgba(255,255,255,.55); }

/* =============================================================================
   2. BARRA DE CONFIANZA
   ============================================================================= */
.dcp-confianza { background: var(--dcp-papel); border-bottom: 1px solid var(--dcp-linea); }
.dcp-confianza__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--dcp-linea);
}
.dcp-confianza__item {
  background: var(--dcp-papel); padding: 26px 22px;
  display: flex; align-items: flex-start; gap: 14px;
}
.dcp-confianza__ico {
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--dcp-verde-suave); border-radius: 10px; color: var(--dcp-verde);
}
.dcp-confianza__ico svg { width: 21px; height: 21px; }
.dcp-confianza__item b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
.dcp-confianza__item span { font-size: 13.5px; color: var(--dcp-apagado); line-height: 1.5; display: block; }
@media (max-width: 980px) { .dcp-confianza__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dcp-confianza__grid { grid-template-columns: 1fr; } }

/* =============================================================================
   3. TARJETAS DE PRODUCTO
   ============================================================================= */
.dcp-productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .dcp-productos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dcp-productos { grid-template-columns: 1fr; } }

.dcp-card {
  background: var(--dcp-papel); border: 1px solid var(--dcp-linea);
  border-radius: var(--dcp-radio); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s var(--dcp-ease), box-shadow .22s, border-color .22s;
}
.dcp-card:hover { transform: translateY(-4px); box-shadow: var(--dcp-sombra-alta); border-color: var(--dcp-verde-borde); }
.dcp-card__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dcp-fondo-2); }
.dcp-card__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--dcp-ease); }
.dcp-card:hover .dcp-card__foto img { scale: 1.05; }
.dcp-card__etiqueta {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(18,25,21,.82); color: #fff; backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 5px;
}
.dcp-card__cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.dcp-card__cuerpo p { font-size: 14.5px; color: var(--dcp-tinta-2); margin: 0; }
.dcp-card__datos {
  list-style: none; margin: 4px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--dcp-linea);
  display: flex; flex-direction: column; gap: 7px;
}
.dcp-card__datos li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--dcp-tinta-2);
}
.dcp-card__datos li::before {
  content: ""; width: 6px; height: 6px; margin-top: 7px; flex: 0 0 auto;
  background: var(--dcp-verde); border-radius: 50%;
}
.dcp-card__pie { margin-top: auto; padding-top: 16px; }
.dcp a.dcp-card__mas, .dcp-card__mas {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14.5px; color: var(--dcp-verde);
}
.dcp-card__mas svg { width: 15px; height: 15px; transition: translate .18s; }
.dcp-card:hover .dcp-card__mas svg { translate: 4px 0; }

/* =============================================================================
   4. SECTORES
   ============================================================================= */
.dcp-sectores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .dcp-sectores { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .dcp-sectores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .dcp-sectores { grid-template-columns: 1fr; } }

.dcp-sector {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--dcp-radio-sm); padding: 24px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background-color .2s, border-color .2s, transform .2s var(--dcp-ease);
}
.dcp-sector:hover { background: rgba(255,255,255,.09); border-color: rgba(11,117,60,.6); transform: translateY(-3px); }
.dcp-sector__ico { width: 34px; height: 34px; color: #6FC494; }
.dcp-sector__ico svg { width: 100%; height: 100%; }
.dcp a.dcp-sector b, .dcp-sector b { font-family: "Oswald", Arial, sans-serif; font-size: 17px; font-weight: 500; color: #fff; }
.dcp-sector span { font-size: 13.5px; color: #9FB6A9; line-height: 1.5; }

/* =============================================================================
   5. PROCESO
   ============================================================================= */
.dcp-proceso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 900px) { .dcp-proceso { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dcp-proceso { grid-template-columns: 1fr; } }

.dcp-paso { padding: 26px 26px 26px 0; border-top: 3px solid var(--dcp-linea); position: relative; }
.dcp-paso:first-child { border-top-color: var(--dcp-verde); }
.dcp-paso__n {
  font-family: "Oswald", Arial, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .16em; color: var(--dcp-verde); display: block; margin-bottom: 8px;
}
.dcp-paso h3 { margin-bottom: 7px; font-size: 19px; }
.dcp-paso p { font-size: 14.5px; color: var(--dcp-tinta-2); margin: 0; }

/* =============================================================================
   6. CIFRAS
   ============================================================================= */
.dcp-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 860px) { .dcp-cifras { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } }
.dcp-cifra b {
  display: block; font-family: "Oswald", Arial, sans-serif;
  font-size: clamp(38px, 5.4vw, 58px); font-weight: 600; line-height: 1;
  color: var(--dcp-verde); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.dcp-cifra span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--dcp-tinta-2); }
.dcp-sec--verde .dcp-cifra b { color: #6FC494; }
.dcp-sec--verde .dcp-cifra span { color: #A9C0B4; }

/* =============================================================================
   7. GALERÍA
   ============================================================================= */
.dcp-galeria { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1000px) { .dcp-galeria { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .dcp-galeria { grid-template-columns: repeat(2, 1fr); } }
.dcp-galeria a {
  display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--dcp-radio-sm); background: var(--dcp-fondo-2);
  border: 1px solid var(--dcp-linea);
}
.dcp-galeria img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s var(--dcp-ease); }
.dcp-galeria a:hover img { scale: 1.08; }

/* =============================================================================
   8. BANDA DE CIERRE
   ============================================================================= */
.dcp-cierre {
  background: var(--dcp-verde);
  background-image: linear-gradient(115deg, var(--dcp-verde-osc), var(--dcp-verde) 55%, #0E8A47);
  color: #fff; padding-block: clamp(46px, 6vw, 72px);
}
.dcp-cierre__grid {
  display: grid; grid-template-columns: 1.4fr auto; gap: 30px 40px; align-items: center;
}
@media (max-width: 860px) { .dcp-cierre__grid { grid-template-columns: 1fr; } }
.dcp-cierre h2 { color: #fff; margin-bottom: 10px; }
.dcp-cierre p { color: rgba(255,255,255,.88); font-size: 17px; max-width: 54ch; margin: 0; }

/* =============================================================================
   9. FOOTER
   ============================================================================= */
.dcp-footer { background: var(--dcp-tinta); color: #A9BCB1; font-size: 14.5px; }
.dcp-footer a { color: #A9BCB1; }
.dcp-footer a:hover { color: #fff; }

.dcp-footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px;
  padding-block: clamp(44px, 5.5vw, 66px);
}
@media (max-width: 1040px) { .dcp-footer__top { grid-template-columns: 1fr 1fr; gap: 38px 30px; } }
@media (max-width: 560px)  { .dcp-footer__top { grid-template-columns: 1fr; } }

.dcp .dcp-footer__logo, .dcp-footer img.dcp-footer__logo { height: 52px; width: auto; margin-bottom: 18px; }
.dcp-footer__lema { color: #C9D8CF; font-size: 15px; margin-bottom: 18px; max-width: 34ch; }

.dcp-footer h4 {
  font-family: "Ubuntu", Arial, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.14); position: relative;
}
.dcp-footer h4::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 38px; height: 2px;
  background: var(--dcp-verde);
}
.dcp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.dcp-footer__contacto { display: flex; flex-direction: column; gap: 13px; }
.dcp-footer__dato { display: flex; align-items: flex-start; gap: 11px; }
.dcp-footer__dato svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; color: var(--dcp-verde); }
.dcp-footer__dato b { color: #fff; font-weight: 600; display: block; }

.dcp-footer__mapa {
  margin-top: 16px; border-radius: var(--dcp-radio-sm); overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); line-height: 0;
}
.dcp-footer__mapa iframe { width: 100%; height: 170px; border: 0; display: block; filter: grayscale(.3); }

.dcp-footer__news p { font-size: 14px; color: #93A99D; margin-bottom: 14px; }
.dcp-footer__form { display: flex; gap: 8px; flex-wrap: wrap; }
.dcp-footer__form input[type="email"] {
  flex: 1 1 170px; min-width: 0; font: inherit; font-size: 14.5px;
  padding: 12px 14px; border-radius: var(--dcp-radio-sm);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff;
}
.dcp-footer__form input::placeholder { color: #7D9389; }
.dcp-footer__form input:focus { outline: 2px solid var(--dcp-verde); outline-offset: 1px; background: rgba(255,255,255,.12); }
.dcp-footer__form button {
  font: inherit; font-size: 14.5px; font-weight: 700; padding: 12px 20px;
  border: 0; border-radius: var(--dcp-radio-sm); background: var(--dcp-verde); color: #fff; cursor: pointer;
}
.dcp-footer__form button:hover { background: #0E8A47; }

.dcp-footer__redes { display: flex; gap: 9px; margin-top: 20px; }
.dcp-footer__redes a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 9px;
  transition: background-color .18s, border-color .18s, transform .18s;
}
.dcp-footer__redes a:hover { background: var(--dcp-verde); border-color: var(--dcp-verde); transform: translateY(-2px); }
.dcp-footer__redes svg { width: 17px; height: 17px; }

.dcp-footer__bajo {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between;
  font-size: 13px; color: #7D9389;
}
.dcp-footer__bajo nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* Botón flotante de WhatsApp */
.dcp-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: #25D366; color: #fff; border-radius: 50%;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.75);
  transition: transform .2s var(--dcp-ease);
}
.dcp-wa:hover { transform: scale(1.08); color: #fff; }
.dcp-wa svg { width: 29px; height: 29px; }
@media (max-width: 520px) { .dcp-wa { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* --- Preferencias del usuario ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dcp *, .dcp-footer *, .dcp-wa { transition: none !important; animation: none !important; }
  .dcp-card:hover { transform: none; }
}