:root{
  --badaloni-green:#244d2c;
  --badaloni-gold:#d7aa32;
  --cream:#fff8df;
}

.otras-section{background:linear-gradient(180deg,#fffaf0 0%,#fff5d8 100%)}
.otras-heading{max-width:760px;margin-inline:auto}

.otras-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
  max-width:1040px;
  margin:38px auto 54px;
}

.otra-card{
  --accent-rgb:90,125,64;
  position:relative;
  overflow:hidden;
  background:#fff;
  border:3px solid var(--badaloni-green);
  border-radius:22px;
  padding:5px;
  box-shadow:
    0 12px 28px rgba(41,39,23,.10),
    0 0 28px rgba(var(--accent-rgb),.20);
  transition:transform .28s ease,box-shadow .28s ease;
}

.otra-card::before{
  content:"";
  position:absolute;
  inset:5px;
  border:2px solid var(--badaloni-gold);
  border-radius:16px;
  pointer-events:none;
  z-index:3;
}

.otra-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 20px 42px rgba(41,39,23,.15),
    0 0 38px rgba(var(--accent-rgb),.31);
}

.otra-image{
  height:310px;
  overflow:hidden;
  border-radius:15px 15px 0 0;
  background:#f3ead2;
}
.otra-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.otra-card:hover .otra-image img{transform:scale(1.045)}

.otra-body{padding:25px 27px 29px;text-align:left;position:relative;z-index:2}
.otra-body h3{font-size:clamp(1.65rem,2.4vw,2.1rem);line-height:1.05;margin:10px 0 17px;color:#17140d}
.otra-tag{
  display:inline-block;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(var(--accent-rgb),.12);
  color:rgb(var(--accent-rgb));
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.fillings{
  display:grid;
  gap:8px;
  padding:17px 18px;
  border:1px solid rgba(36,77,44,.28);
  border-radius:14px;
  background:#fffaf0;
  color:#3b3323;
}
.fillings strong{color:var(--badaloni-green);margin-bottom:2px;font-size:.92rem}
.fillings span{font-size:1rem;line-height:1.45}

.accent-torteletis{--accent-rgb:181,116,56}
.accent-fideos{--accent-rgb:80,124,64}
.accent-capelletis{--accent-rgb:151,92,47}
.accent-varenikes{--accent-rgb:192,143,43}

.otras-hero .hero-btn{
  display:inline-flex;margin-top:18px;padding:12px 20px;border-radius:999px;
  background:#a11f26;color:#fff;text-decoration:none;font-weight:800;
  box-shadow:0 9px 22px rgba(120,22,28,.25)
}

@media(max-width:780px){
  .otras-grid{grid-template-columns:1fr;gap:24px;margin-top:28px}
  .otra-image{height:270px}
}

@media(max-width:480px){
  .otra-card{border-radius:18px;padding:4px}
  .otra-card::before{inset:4px;border-radius:13px}
  .otra-image{height:230px}
  .otra-body{padding:21px 20px 24px}
}