:root{
  --ink:#17212b;
  --muted:#5c6875;
  --bg:#f8f5f0;

  --brand:#0b5a4f;
  --brand-dark:#08443c;
  --brand-soft:#e8f4f1;

  --accent:#c8a96b;
  --accent-soft:#f6efe3;

  --card:#ffffff;
  --stroke:rgba(23,33,43,.08);
  --stroke-soft:rgba(23,33,43,.05);

  --r:22px;
  --r2:14px;

  --shadow:0 24px 60px rgba(15,23,42,.10);
  --shadow-hover:0 28px 70px rgba(15,23,42,.14);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

/* ===== Section ===== */
.section_products{
  width:100%;
  padding:clamp(2rem, 4vw, 4rem) 1rem;
  border-top:1px solid rgba(23,33,43,.05);
  border-bottom:1px solid rgba(23,33,43,.05);
}

/* ===== Container ===== */
.container_product{
  width:min(1200px, 100%);
  margin:0 auto;
  display:grid;
  justify-items:center;
  gap:.5rem;
  padding:0;
}

/* ===== Card ===== */
.boxes_product{
  width:min(74vw, 1120px);
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;

  display:grid;
  grid-template-columns: 58% 42%;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "img head"
    "img text";
}

/* Elegant border glow */
.boxes_product::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(11,90,79,.18),
    rgba(200,169,107,.18),
    rgba(255,255,255,.65)
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* Soft accent line */
.boxes_product::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--brand), var(--accent));
  opacity:.9;
}

@media (hover:hover) and (pointer:fine){
  .boxes_product{
    transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  }

  .boxes_product:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(11,90,79,.12);
  }
}

/* ===== Header ===== */
.info_box_product{
  grid-area:head;
  padding:1.25rem 1.3rem .4rem 1.3rem;
  display:flex;
  align-items:flex-end;
}

.info_box_product a{
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  line-height:1.1;
}

.cursiva-inglesa{
  font-family:"Alex Brush", cursive;
  font-size:clamp(2rem, 1.3rem + 1.8vw, 3.2rem);
  font-weight:400;
  color:#1b2d24;
  letter-spacing:.01em;
}

/* ===== Image ===== */
.box_product{
  grid-area:img;
  position:relative;
  display:block;
  min-height:280px;
  background:#dfe7e3;
  overflow:hidden;
}

.box_product img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.02);
  transition:transform .6s ease;
}

.box_product::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.06)),
    radial-gradient(120% 100% at 50% 75%, transparent 40%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  .boxes_product:hover .box_product img{
    transform:scale(1.08);
  }
}

/* ===== Text ===== */
.texto{
  grid-area:text;
  padding:.8rem 1.3rem 1.35rem 1.3rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
}

.texto h3{
  margin:0;
  color:var(--ink);
  font-size:clamp(1.05rem, .95rem + .45vw, 1.35rem);
  font-weight:700;
  line-height:1.25;
}

.texto p{
  margin:0;
  color:var(--muted);
  font-size:clamp(.98rem, .92rem + .2vw, 1.06rem);
  line-height:1.7;
  max-width:62ch;
}

/* ===== Buttons ===== */
.acciones_producto{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:.2rem;
}

.btn_accion{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.82rem 1.3rem;
  border-radius:999px;
  text-decoration:none;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.btn_whatsapp{
  background:var(--brand);
  color:#fff;
  border:1px solid transparent;
  box-shadow:0 10px 24px rgba(11,90,79,.20);
}

.btn_vermas{
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(23,33,43,.10);
}

@media (hover:hover) and (pointer:fine){
  .btn_whatsapp:hover,
  .btn_vermas:hover{
    transform:translateY(-2px);
  }

  .btn_whatsapp:hover{
    background:var(--brand-dark);
    box-shadow:0 14px 28px rgba(11,90,79,.26);
  }

  .btn_vermas:hover{
    background:var(--accent-soft);
    border-color:rgba(200,169,107,.35);
  }
}

/* ===== Accessibility ===== */
.info_box_product a:focus-visible,
.box_product:focus-visible,
.btn_accion:focus-visible{
  outline:3px solid rgba(11,90,79,.22);
  outline-offset:3px;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .boxes_product{
    width:min(94vw, 900px);
    grid-template-columns:1fr;
    grid-template-areas:
      "img"
      "head"
      "text";
  }

  .box_product{
    min-height:240px;
  }

  .info_box_product{
    padding:1rem 1rem .2rem 1rem;
  }

  .texto{
    padding:.7rem 1rem 1.1rem 1rem;
  }

  .cursiva-inglesa{
    font-size:clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  }
}

@media (max-width: 560px){
  .section_products{
    padding:1.4rem .7rem;
  }

  .boxes_product{
    width:100%;
  }

  .acciones_producto{
    flex-direction:column;
  }

  .btn_accion{
    width:100%;
  }

  .box_product{
    min-height:220px;
  }
}

@media (prefers-reduced-motion: reduce){
  .boxes_product,
  .box_product img,
  .btn_accion{
    transition:none !important;
  }
}